Cara Membuat SlideShow di Blogger

Nah kali aku akan membahas tentang cara Membuat slide show di blog,seperti yang ada di blogku..
ngak usah lama-lama ntar malah pada bengong, yuk cari tahu cara membuat slideshow widget untuk gambar di blogger dengan bantuan javascript dan css

Langkahnya sangat sederhana,kamu pilih Dashboard lalu pilih Tata Letak / Rancangan kemudian pilih tab Edit HTML,lalu seperti biasa contreng tulisan Exspand Widget Templates.
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard),setelah ketemu tinggal letakkan kode CSS di bawah ini tepat diatas kode ]]></b:skin> tersebut.

/* CSS easySlider */ #containerSlider { width:210px; height:110px; margin:0 40px; 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:210px; height:110px; 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(http://2.bp.blogspot.com/-sy3zWYyTWLg/TWpAOl7v1II/AAAAAAAAAt4/GZ4veAPRe_Q/s1600/Arrow-Left%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0; display:block; height:34px; width:31px; } #nextBtn a { background:transparent url(http://1.bp.blogspot.com/-ri5ctN5jxp4/TWpARdezqDI/AAAAAAAAAuA/dfmkoYxhjew/s1600/Arrow-Right%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0; } #slider img { background:#ccc; padding:5px; width:200px; height:100px; }

Setelah itu,carilah kode</head> ,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


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

Lalu simpan templates nya,ini blom selesai, sekarang membuat widgetnya :D
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar ,dan klik tulisan Add New Widget atau Tambah Gadget. Selanjutnya pilih HTML/Javascript kemudian letakkan kode dibawah ini dan simpan :

<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="pemandangan 1" src="http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg" /></a></li>

<li><a href="#"><img alt="pemandangan 2" src="http://1.bp.blogspot.com/-XOxtNnKWuMA/TWoxnu0KhuI/AAAAAAAAAtA/Ihx2MMDHKZo/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B2.jpg"/></a></li>

<li><a href="#" target=_blank"><img alt="pemandangan 3" src="http://2.bp.blogspot.com/-V8sTo8mkTGs/TWoxiV2oGhI/AAAAAAAAAs4/sBbrwSA5hl8/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B1.jpg"/></a></li>

</ul>
</div>
</div>

Ket:
* Kamu hanya merubah kode yang bewarna merah diatas.
* Untuk tanda '#' gantilah dengan url tujuan kemana link gambar akan diarahkan,misal: http://pelajaran-blog.blogspot.com/2009/04/apa-itu-css.html.
* Untuk gambar sobat bisa memilih gambar sendiri baik dari komputer maupun dari web dengan mengambil url / alamatnya,misal: http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600 /pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg