Langkah Cara Memasang / Membuat Slide Show Gambar dengan JQuery di Blogger
Saran saya agar aman simpan dulu template blog Anda sebelum memulai.Langkahnya sangat sederhana, pilih Dashboard lalu pilih Tata Letak / Rancangan kemudian pilih tab Edit HTML,lalu contreng tulisan Exspand Widget Templates.
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F),setelah ketemu tinggal letakkan kode CSS berikut 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(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
Lalu simpan templates. Sekarang buat widgetnya
Untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget selanjutnya pilih HTML/Javascript, kemudian letakkan kode berikut:
<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>
Lalu simpan, slideshow widget blogspot yang tak kalah menarik jika dibandingkan slideshow instant widget seperti yang sudah banyak beredar.
Selamat mencoba and semoga berhasil
Ket:
Anda bisa merubah kode yang bercetak tebal diatas, Selain itu resiko tanggung sendiri =)
Untuk tanda # gantilah dengan url tujuan kemana link gambar akan diarahkan,misal:
http://hangs.sidoarjoku.com/.
Untuk gambar bisa memilih gambar sendiri baik dari komputer maupun dari web dengan mengambil url / alamatnya,misal:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZD1GLBs09naMQWbPiwZDtGKupEKfRuuhyphenhyphenl0ig2D6kOAEm69d1StQkXh7mSM38tV7QM2nRl-d7EobXnR09E5ja6zDnAQEMDIiPFBSP3nV7Ie-s9j2ArXW-Tb-5mdMKCmH931z7QAkVRUYd/s220-h/hng.psd.jpg
