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.
7. Selanjutnya buatlah widget baru dengan cara klik Page Element lalu Add Widget baru dan
pilih HTML/Javascript dan masukkan kode berikut:
Selesai..
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(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
6. Klik SAVE<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>
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.<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..
Anda baru saja membaca artikel yang berkategori Seputar Blog
dengan judul Cara Membuat Slider/Slide Gambar Bergerak Otomatis Pada Blog. Anda bisa bookmark halaman ini dengan URL http://portalsolo.blogspot.com/2012/04/cara-membuat-sliderslide-gambar.html. Terima kasih!
Ditulis oleh:
Unknown - Sunday, April 15, 2012
Belum ada komentar untuk "Cara Membuat Slider/Slide Gambar Bergerak Otomatis Pada Blog"
Post a Comment