Cara membuat Slider

Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share mengenai slider. Perbedaan slideshow dengan Slider yaitu Kalau slideshow bekerja secara otomatis, sedang slider yang akan saya bahas yaitu slider bergerak kesamping kanan atau kiri apa bila kita mengklik tombol yang ada di sisi kanan dan kiri slider tersebut.



Contoh 1 Gambar slider seperti ini :




Contoh 2 Gambar slider seperti ini :


LIHAT DEMO CONTOH 1


LIHAT DEMO CONTOH 2 


Bila anda berminat, silahkan anda ikuti langkah-langkah berikut ini
1. Login ke blogger
2. Klik Design dan pilih Edit Html
3. Sebagai langkah berjaga2, lebih baik download dulu template korang..
4. Silakan anda cari kode  :</head>
5. Copy kode dibawah ini, dan paste diatas kode  :</head>

Untuk slider contoh 1 :

<script src="http://bnote.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;border:2px solid #5d5d5d; background-color:#aaa;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:10 10px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {-moz-border-radius: 5px;width: 840px;height: 100px;margin: 0 auto;padding:10px;border:2px solid #fff; background-color:#bbb;} .jcarousel-skin-tango .jcarousel-item {width: 100px;height: 110px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0; cursor:pointer; height:25px; right:0px; position:absolute; width:25px; top: 50%; } .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0; cursor:pointer; height:25px; left:5px; position:absolute; width:25px; top: 50%; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 100;display: none;} .jcarousel-prev {z-index: 100;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:100px;width:100px;} </style>

Untuk slider contoh 2 :

<script src="http://bnote.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;border:2px solid #5d5d5d; background-color:#aaa;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:10 10px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {-moz-border-radius: 5px;width: 840px;height: 100px;margin: 0 auto;padding:10px;border:2px solid #fff; background-color:#bbb;} .jcarousel-skin-tango .jcarousel-item {width: 100px;height: 110px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0; cursor:pointer; height:25px; right:0px; position:absolute; width:25px; top: 50%; } .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0; cursor:pointer; height:25px; left:5px; position:absolute; width:25px; top: 50%; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 100;display: none;} .jcarousel-prev {z-index: 100;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:100px;width:100px;} </style>

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.

Langkah selanjutnya : 

6. Save template. 

7. Lankah selanjutnya kembali ke Design dan pilih Page Element. 

8. Pilih Add a Gadget.

9. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

div id='news-slider'> <ul class='jcarousel-skin-tango' id='mycarousel'> <li><a href='Ulr dokumen 1'><img src='Ulr gambar 1'/></a></li> <li><a href='Ulr dokumen 2'><img src='Ulr gambar 2'/></a></li> <li><a href='Ulr dokumen 3'><img src='Ulr gambar 3'/></a></li> <li><a href='Ulr dokumen 4'><img src='Ulr gambar 4'/></a></li> <li><a href='Ulr dokumen 5'><img src='Ulr gambar 5'/></a></li> </ul> </div>

8. Save. Selamat mencuba... xD