Untuk membuat Gambar Auto Slider/ Gambar bergerak otomatis pada blog
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
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(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>