Slider Menu Image

image Sebelumnya saya sudah pernah membahas cara membuat slider menu ala zinmag-primus, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan. Sebagai contoh bisa sobat lihat pada contoh demo slide-nya disini.

 

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

 

  • Silahkan download terlebih dahulu kode javascript-nya disini dan disini.
  • Kemudian upload file js tersebut ke google sites atau google code.
  • Setelah selesai upload, lihat url atau link dari file yang sudah di upload, seperti contoh link yang sudah saya upload bentuknya seperti ini :

    http://miscah.googlecode.com/files/jquery-1.3.1.min.js
    http://miscah.googlecode.com/files/jquery.scrollTo.js

  • Sekarang bagian edit template, masuk ke Tata Letak –> Edit HTML.
  • Tambahkan kode berikut ini setelah kode ]]></b:skin>

     

    <script src='http://miscah.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
    <script src='http://miscah.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>

     

    <style type='text/css'>
    #slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
    #slider a:link, #slider a:active {color:#FFF;text-decoration:none}
    #slider a:hover {color:#F00}
    #mask-gallery {overflow: hidden}
    #gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
    #gallery li {float:left;padding:0px;margin:0px}
    #mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}

    </style>

    <script>
    $(document).ready(function() {
    var speed = 5000;

           $(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
           $(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
           $(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());

           var run = setInterval(&#39;newsscoller(0)&#39;, speed);

           $(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);

           $(&#39;#btn-pause&#39;).click(function () {
                  clearInterval(run);
                  return false;
           });

           $(&#39;#btn-play&#39;).click(function () {
                  run = setInterval(&#39;newsscoller(0)&#39;, speed);

                  return false;
    });

           $(&#39;#btn-next&#39;).click(function () {
                  newsscoller(0);
                  return false;
           });

           $(&#39;#btn-prev&#39;).click(function () {
                  newsscoller(1);
                  return false;
    });

           $(&#39;#slider&#39;).hover(
                  function() {
                         clearInterval(run);
    },
                  function() {
                         run = setInterval(&#39;newsscoller(0)&#39;, speed);
                  }
           );
    });

    function newsscoller(prev) {
           var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
           var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);

           if (prev) {

                  var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);

                  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);

                  } else {
                         var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
                         var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
    }

           $(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
                  next_image.addClass(&#39;selected&#39;);
                  next_excerpt.addClass(&#39;selected&#39;);

                  $(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
                  $(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);

    }
    </script>

  • Simpan Template.

Keterngan :

  1. Kode yang berwarna merah adalah kode js yang sudah sobat upload ke hosting google site atau google code, jika malas mengupload silahkan gunakan saja milik saya.
  2. var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
  3. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar sobat.
  • Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
  • Pilih Tambah Gadget –> pilih yang HTML/Javascript.
  • Sekarang masukkan kode berikut :

    <div id="slider">
    <div id="mask-gallery">
    <ul id="gallery">

    <li><a href="http://miscah.blogspot.com/2010/03/roten-herzen-template.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    <li><a href="http://miscah.blogspot.com/2010/03/smart-gradient.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    <li><a href="http://miscah.blogspot.com/2010/02/blue-light-template.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

    </ul>
    </div>
    </div>
    <div id="buttons">
    <a href="#" id="btn-prev">prev</a>
    <a href="#" id="btn-pause">pause</a>
    <a href="#" id="btn-next">next</a>
    <a href="#" id="btn-play">play</a>
    </div>

  • Kemudian Simpan.

Keterangan :

  1. Kode yang berwarna hijau adalah url yang akan di tuju.
  2. Kode yang berwarna ungu adalah url dari gambar.

Selamat mencoba.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

5 comments

31 Maret 2010 06.07

Makasih untuk tutorialnya kawand...

1 April 2010 18.34

Terima kasih Dody infonya....

Tentang hal tag label....itu sy dapat arahan dari seorang teman yang visitornya 5000 an sehari, dia mengatakan tag label yang berulang2 tidak apa2, justru memudahkan pencarian di search engine, sy sdh bahas hal itu dgn dia, dia banyak memberikan pengarahan tentang cara posting yang benar serta menentukan judul posting yang tepat sesuai keyword...

Untuk hal lainnya yang mungkin beda prinsip sy tidak tahu, sy hanya mengikuti saran2 yang sy rasa baik utk blog sy...bila ada hal yang salah saya mohon bantuan dan penjelasannya..

Terima kasih Dody atas perhatiannya

mantap sob artikelnya....di tunggu ya artikel berikutnya....

2 April 2010 17.52

kalo mau yg pake trik ini jquery 1.3.1.js-nya mending dr si embah ajah, jd hostingan satu ajah yg keduanya itu...hohohoho
ngirit ngirit...wekekekekkkk

12 Juni 2010 01.03

wah...makasih atas infonya

Poskan Komentar

Reader Community

Recent Comments