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:

Blogger

• Cara Copy Paste Artikel Yang tidak bisa di Copy di Sebuah Blog ataupun Website
• Kenapa Blogspot.com berubah menjadi .co.id ‐ apa penyebabnya dan bagaimana mengatasinya?
• Cara Membuat Slideshow Pada Blogger
• Cara membuat chat box di blog & macam-macam chat box
• Cara Membuat Chat Box di Blogger
• Cara memasang radio online di blog
• CARA MEMBUAT RADIO STREAMING
• Membangun Radio Internet dengan Listen2MyRadio.Com
• Membangun Sendiri Radio Internet
• Radio Online
• Tampilan Baru Dasbor Blogger.com
• Membuat Label untuk Artikel Miniatur Hover
• Menambah Button Send ke Facebook
• Laporan berita sekilas dari w3spy.net
• Pengaturan Ukuran pada Kolom Komentar dan Postingan Lebih Fleksibel
• Membuat Web Hosting di Google Sites
• Google Code - Cara Membuat File Hosting di Google Code
• Tips Mendapatkan Banyak Follower di Twitter
• Membuat Artikel Terkait dengan Disertai Thumbnails
• Cara Merubah Blogger.com atau Draft.blogger.com Sebagai Default Dasbor Blogspot Anda
• Cara Memasang Widget SMS Gratis pada Blogger Blogspot
• Favicon Fitur Baru dari Blogger
• Menambahkan Gadget di Header
• Cara Membuat Menu dan Iklan Floating Bottom - Trik Menu dan Iklan Selalu ada di Layar
• Cara Membuat Iklan Melayang - Agar Iklan Tampil Setiap Halaman Blog Dikunjungi