TutorialBlog - Cara Membuat Slider/Slide Gambar Bergerak Otomatis Pada Blog

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

Nih langsung saja praktik Masbroo

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..