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/AVvXsEiUk1uPnqDvItdQgJzE_OQgqXfM-OwyydsAJ0I09NAvEU7HLLoFO0Ns1dCyLbFe5pckhSiTt0nbA2-UpQqBNnoH5fryxtf4ybB_sSLKqkaFSFtsGX7ab7oXnoQgNHEZd6FVwbx1LfDxB_0z/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/AVvXsEiUk1uPnqDvItdQgJzE_OQgqXfM-OwyydsAJ0I09NAvEU7HLLoFO0Ns1dCyLbFe5pckhSiTt0nbA2-UpQqBNnoH5fryxtf4ybB_sSLKqkaFSFtsGX7ab7oXnoQgNHEZd6FVwbx1LfDxB_0z/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>

Sekian dulu postingan kali ini,Saya mohon berikan sedikit komentar anda pada postingan ini.

Judul: Cara Membuat Slider Gambar Untuk Header; Ditulis oleh Twitter ask; Rating Blog: 5 dari 5

Ditulis Oleh : Twitter ask Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Slider Gambar Untuk Header. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://twitterask.blogspot.com/2012/01/cara-membuat-slider-gambar-untuk-header.html" target="_blank">Cara Membuat Slider Gambar Untuk Header</a>

:: Get this widget ! ::