Membuat Image Slider Sederhana Dengan Jquery di Blogger

Untuk membuat Slider Image sederhana di blogger, dapat kita lakukan menggunakan jquery, tentunya ini juga terkadang harus disesuaikan dengan template kita agar dapat berjalan dengan sempurna.

Secara garis besar perlu dilakukan empat tahap untuk dapat membuatnya, yaitu

1. Menambahkan css dan customize

Masuk ke Blogger  > Dashboard > Design > Edit Html, ceklist Expand Widget Templatesdan temukan kode :  ]]></b:skin>

 Setelah itu tepat diatas atau sebelumnya, copykan kode dibawah:

#gallery {
position:relative;
height:320px; /* Set Height   */
width:540px;  /* Set Width    */
overflow:hidden;
 }
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px;
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
} 

2. Tambahkan jquery plugin
Masih di Edit Html, temukan </head> dan copykan kode plugins dibawah ini tepat sebelumnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
type='text/javascript'></script>

Tetapi hal ini tidak perlu dilakukan jika anda sudah mempunyai plugin tersebut pada Template anda.

3. Tambahkan Java Script
Masih diposisi Edit Html, dan tambahkan java script ini sebelum </head> tag

<script type="text/javascript">
 //<!--
 $(document).ready(function() {
 slideShow();
 });
 function slideShow() {
 var dur= 5000;
 $('#gallery a').css({opacity: 0.0});
 $('#gallery a:first').css({opacity: 1.0});
 $('#gallery .caption').css({opacity: 0.7});
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);
 setInterval('gallery()', dur);
 }
 function gallery() {
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first')
 :current.next()) : $('#gallery a:first'));
 var caption = next.find('img').attr('rel');
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 })
 .animate({height: '1px'}, { queue:true, duration:300 });
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
 $('#gallery .content').html(caption);
 }
 //-->
</script>

Setelah selesai dengan dua hal tersebut diatas jangan lupa untuk tekan tombol Save Template.

4. Tambahkan Slider Widget
Masuk ke Blogger > Design > Page Element > Add 'HTML/Javascript' gadget, dan copykan kode dibawah ini. lalu klik Save.

<div id="gallery">
  <!-- Image Slide 1 harus mempunyai class='show' -->
  <a href="Link url" class="show">
  <img src="Image url disini" alt="" width="540" height="320" title=""<h3>Title disini</h3> Deskripsi "/></a>
  <!-- Image Slide 2 -->
  <a href="Link Url" >
  <img src="Image url disini" alt="" width="540" height="320" title=""<h3>Title disini</h3> Deskripsi "/></a>
  <!-- Anda bisa menambahkan images sesuka anda seperti link diatas  -->
  <div class="caption"><div class="content"></div></div>
<div style='clear:both;'/></div>

Replace Link Url dengan link url yang sesuai dengan anda
Replace Image url disini dengan Image anda dan sesuaikan width and height
Replace Title disini dengan judul yang anda mau
Replace Deskrisi dengan deskripsi singkat

Image slider pada artikel ini hanya bersifat statis, artinya sobat harus menambahkan URL gambar untuk membuatnya bekerja, tetapi jika ingin mencoba membuatnya secara otomatis petunjuk pada artikel berikut sangat bagus untuk di ikuti : http://www.maskolis.com/2012/04/membuat-content-slider-image-otomatis.html

Selamat mencoba.