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;
}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>
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">8. Untuk Url dapat ditambah sesuai keinginan.
<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>
Selesai..