Cara Membuat Slider Gambar Pada Blog

Banyak orang yang bertanya tanya bagaimana sich Cara Membuat Slider Gambar Pada Blog ? termasuk saya. Karena dengan adanya slider gambar pada blog yang bergerak secara otomatis tentu akan lebih mempercantik tampilan blog kita.

Nah sekarang kita akan mencoba bagaimana Cara Membuat Slider Gambar Pada Blog. sahabat tinggal ikuti saja langkah langkah yang akan saya berikan dibawah ini :

1. Login ke Akun Blogger

2. Lalu pilih Rancangan

3. Selanjutnya klick Edit HTML

4. Centang pada bagian Expand Widget

5. Jangan lupa untuk meng-download terlebih dahulu template sahabat supaya apabila terjadi kesalahan sahabat bisa mengembalikannya seperti semula

6. Cari kode ]]></b:skin>

7. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

/* 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; }

NB :

Ganti kode yang berwarna biru sesuai dengan ukuran yang sahabat inginkan

8. Selanjutnya sahabat cari lagi kode </head> dan copy kode dibawah ini lalu letakan tepat diatas kode  </head>

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

Lalu Save template sahabat

Nah sekarang template sahabat sudah bisa menampilkan Slider Gambar yang bergerak secara otomatis. Namun tunggu dulu Cara Membuat Slider Gambar Pada Blog belum selesai hehehe

Langkah selanjutnya untuk bisa menampilkan Slider Gambar maka sahabat harus mempersiapkan terlebih dahulu gambar yang akan ditampilkan.

Nah kalau sahabat sudah mempunyai gambar untuk ditampilkan maka langkah terakhir Cara Membuat Slider Gambar Pada Blog adalah sahabat harus membuat sebuah widget baru. Langkah-langkahnya sebagai berikut :

1. Cari Page Element
2. Tambahkan Widget Baru atau Add Widget
3. Pilih HTML/Javascript
4. Copy kode dibawah ini lalu pastekan kedalamnya

<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" /></a></li>
</ul>
</div>
</div>

Sekarang Simpan dan lihatlah hasilnya.

NB :

Ganti Url gambar yang berwarna biru dengan Url gambar milik sahabat

Kalau ada kesalahan kemungkinan sahabat salah meletakan kode diatas, oleh karena itu baca baik-baik cara meletakan kodenya.

Demikian Tutorial Cara Membuat Slider Gambar Pada Blog, semoga bermanfaat dan dapat membantu sahabat