Membuat Slider Gambar Pada Header

cara menambahkan slider jquery konten ke blog atau website Anda. Contoh ini untuk ukuran gambar 307px lebar dan 254px tinggi slidernya. Ingat untuk mendapatkan URL gambarnya, bisa anda upload dulu ke hosting gambar.

Cara Mebuatnya ikuti instruksi di bawah ini :

1.Masuk Ke akun Blogger Anda,Pilih Rancangan,Edit HTML
2.Cari Kode ,Setelah ketemu,Copy paste kode di bawah ini

3.Tepat Diatas Kode

 </head> 

,Simpan Template.

 <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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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> 

4.Kemudian pilih Rancangan,Tambah Gadget,html java script,Trus masukan kode dibawah ini :

 <div id='news-slider'><ul class='jcarousel-skin-tango' id='mycarousel'><li><a href=' SLIDE-1-LINK-DISINI '><img src=' SLIDE-1-URL-GAMBAR-DISINI '/></a></li><li><a href=' SLIDE-2-LINK-DISINI '><img src=' SLIDE-2-URL-GAMBAR-DISINI '/></a></li><li><a href=' SLIDE-3-LINK-DISINI '><img src=' SLIDE-3-URL-GAMBAR-DISINI '/></a></li><li><a href=' SLIDE-4-LINK-DISINI '><img src=' SLIDE-4-URL-GAMBAR-DISINI '/></a></li><li><a href=' SLIDE-5-LINK-DISINI '><img src=' SLIDE-5-URL-GAMBAR-DISINI '/></a></li></ul></div> 

Lihat contohnya Klik disini.

Sekian dulu postingan kali ini.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s