Cara Membuat Widget Gambar Slider (Gambar Bergerak)

Untuk membuat Gambar Auto Slider/ Gambar bergerak otomatis pada blog carannya sangat mudah dan nggak butuh waktu lama untuk mengerjakannya.

Contohnya bisa sobat liat di Blog sederhana saya http://miztiz-pemudaindonesia.blogspot.com/ ,

Cekidot:

1.  Login dengan akun blogger anda.
2.  Pilih Rancangan
3.  Pilih Edit HTML
4. Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatasnya.

/* CSS easySlider */
#containerSlider {
width:175px;
height:120px;
margin:0 0px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:175px;
height:120px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url() no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url() no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:0px;
width:175px;
height:120px;
}

Perhatikan untuk teks yang berwarna merah dapat anda ganti ukurannya sesuai kebutuhan anda
5. Kemudian cari kode </head> lalu copas kode berikut tepat diatasnya. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

6. Klik SAVE
7. Selanjutnya buatlah widget baru dengan cara klik Page Element lalu Add Widget baru dan pilih
    HTML/Javascript dan masukkan  kode berikut:

<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 1" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 2" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 3" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 4" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 5 dst" /></a></li>
</ul>
</div>
</div>

8. Untuk Url dapat ditambah sesuai keinginan.
    Selesai..