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.
Gambar slider seperti ini :

Lalu bagaimana menambahkan slider ke blog blogger atau website Anda. OK.... silahkan anda download java script (jquery slider files.zip) DISINI, kemudian anda upload java script yang anda download tadi ke Host anda.
Setelah langkah diatas selesai, silahkan anda ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head>

<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;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UVYTfmBdJI23GV0ZOjY3RJ_XpyHp4yd6IVBDS7zoaYAITfp1HKqzX6xTP0U4AC9beqJt0sxaUUX4_tLRhh2ZRagkUd1tsl-rkxVEDSOY74IR0dGJrKx4KZGOeqyzd6UIHXFWYi_ViL1c/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UVYTfmBdJI23GV0ZOjY3RJ_XpyHp4yd6IVBDS7zoaYAITfp1HKqzX6xTP0U4AC9beqJt0sxaUUX4_tLRhh2ZRagkUd1tsl-rkxVEDSOY74IR0dGJrKx4KZGOeqyzd6UIHXFWYi_ViL1c/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.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: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

Langkah selanjutnya :
4. Simpan  template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. 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>

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzoX8elSV2irCx7rDA6v0SrNCR0WkKhpWVI5DhiqXfDV8KtEtf7mLzZ2-so1FJz0-zTFsuCHzXg8N2KhihmcVlsSJAY6J2b3Hf0UoEzNvV3lnqlL1fDIgAytlfQScQwPiyYn6fyH_fwqC/s1600/Business+Company+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM5jb9BFCtxoLOAgwTGwdtAEgKQySumDfa0OzysPKEl_CbFpdtbfFUOsuN8bMzxLlV7OhpwBRgPD98PLhZQYZ9IoX7Ka2-cmPSrNWicFl86rWSrPNV5iW-FfaKkIyRQvK1r7VE2lEOzUmI/s1600/Incorporate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqI41paOkyvga-HfzF3b_O35HtNCqCCWQsTKB_GWz4zvLpSN857jw0_n0KJr1L0fhNVOXYGoWs59u5ERB18O16bAuDgkIsD8hYdUq6iUTMOO-RhN2-7uGVq0uA4zIeykZYEWM482nfPMH9/s1600/Business+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8k65DmyxSQ0xtNQIdpgLZ_LPKfVPATBnj7MVGM_FMfv5JngzqzdKDNgr83FSue7B0CepCfBvFkVxL0S9htX8x7U2ATdzoJ0LLROK_McGKKVH6Mwa4XS7kQudQwKduM5LqI64e0WYRTAYp/s1600/Dominate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQ1cxj-n5fFUXsdZJioKsWvJ_YEBPk0D0Wr3C2MB5Gr9PmS0CMCUiD8gfOoBhTddyWdBaB4YtMYEgU0uSQen5ZbEyLJ0gnMLYqs5BODtkPzASl-X5Fz1gxQRzAQwLmx36wz0xXuKjY6Mm/s1600/Business+Corp+Blogger+Template-1.jpg'/></a></li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKul-yZlgLUrTyNtmWyiPbxV56y_op-uVQArJzBv2AeNJ5hnY_h8V3uYVm2TDEOPjVwO_X6_pTqmp39PcXs6AU-29LZA_bGHybsqAyrXERn9SbgD6cMWniyD8ZMaQtHBOScD2aW5Zu5XR8/s1600/Business+View+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqYouG2Xz-MWoHh29QOdZcJybA5jJj70605LbPjhI-UzMXsyW2XzHqm4NWH8iMb4iGMLhqmjrHqT0QkGZbqrOinbxg3C9VD4ccKOhACTSBWbP4-B-KWgodTmuq3t3Q9DtpEca0bcUM5jM/s1600/Glorius+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_H74drT5f03LNZ0Y1Zfgqg-lAgSHLWpLUFOUmS46WsQrjyC6-PqblA7UKPRhbjFR6vebQLSMTsGVanVaiWS2ESSctHOGCG7mEFtFuPE2SGYMpTrf80ZpWzmAgHjxQ8gGPlhbhPdS6xbh/s1600/iFinance+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiB9ghYhXWQ5aLnBE0N7j-wPV17lWDF-giv4egxW_qu0Q4qnjWtN2y5IjVxCUJtA2rLt8Dprr8Oo_CBZC-RAL_Plpa9KXOuZ38JB7-BdhJpQhNooFeOhwwYU49IYKwkpn4kslE2Vfj7Ko/s1600/Company+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOykQFXcazBDsl83XmIoxNvXpN-8DTVt2ybulNn4WewjqTsYyfL30hG2GX308MpfEVrOYE7cJVEAjmg5v4dAGoc0DDf9FI6-Bm_uL9EkOvHiMTa5qWFcRA3Lido6p-aTJ15R7P0_FsNhS/s1600/Business+Top+Blogger+Template-1.jpg'/></a>
</li>
</ul>
</div>

Ling ke artikel diatas: http://htmlnoer.blogspot.com/2011/01/cara-membuat-slider.html