Cara Membuat Slider Gambar Untuk 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 </head>,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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMI2cQDWy9B9JeW-XW4TU_AZxkMZfgyW5iJgIy7rHFQ_KOkJjpKqPN-BEPC3Ob7V7fkUHtwKFv5N1k8JjGBPewgrNbaJ3DWtzUhlO6j5qHbodllfOs7tgdGEpHkeDYl1XeSNWLjt1bu3Dq/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/AVvXsEiMI2cQDWy9B9JeW-XW4TU_AZxkMZfgyW5iJgIy7rHFQ_KOkJjpKqPN-BEPC3Ob7V7fkUHtwKFv5N1k8JjGBPewgrNbaJ3DWtzUhlO6j5qHbodllfOs7tgdGEpHkeDYl1XeSNWLjt1bu3Dq/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,Saya mohon berikan sedikit komentar anda pada postingan ini.

Artikel Terkait: