Cara membuat widget Auto Image Slide show pada blog

Menampilkan foto-foto kenangan kita memang mempunyai kenikmatan terssendiri. Saat kita melihat kembali foto-foto yang kita ambil pada saat merayakan sesuatu atau momen-momen yang berkesan dalam hidup kita, kita seolah-olah diajak kembali merasakan suasana menyenangkan. kakau saya bilang "back to past".
Hasilnya akan seperti tampilan foto-foto yang ada di sidebar sebelah kanan atas blog ini. Dan anda bisa meletakkannya di mana anda mau, mau di atas, mau di bawah, di kiri, di kanan, atau gak masang juga gak apa-apa. hahaha....

Pertama, login ke Blogger/Blogspot pilih Dashboard, pilih Tata Letak / Rancangan kemudian pilih tab Edit HTML, lalu seperti biasa contreng tulisan Exspand Widget Templates.

Setelah itu cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

<br /> <br /> /* CSS easySlider */<br /> <br /> <br /> #containerSlider {<br /> width:210px;<br /> height:110px;<br /> margin:0 40px;<br /> padding:0;<br /> position:relative;<br /> }<br /> #prevBtn, #nextBtn {<br /> display:block;<br /> margin:0;<br /> overflow:hidden;<br /> padding:0;<br /> text-indent:-8000px;<br /> }<br /> #slider ul, #slider li {<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> text-indent:0;<br /> }<br /> #slider, #slider li {<br /> overflow:hidden;<br /> width:210px;<br /> height:110px;<br /> margin:0 auto;<br /> }<br /> #slider {<br /> margin-left:0;<br /> background:#ccc;<br /> border:1px solid #999;<br /> }<br /> #prevBtn, #nextBtn {<br /> display:block;<br /> height:34px;<br /> left:-20px;<br /> position:absolute;<br /> top:38px;<br /> width:31px;<br /> }<br /> #nextBtn {<br /> left:200px;<br /> }<br /> #prevBtn a, #nextBtn a {<br /> background:transparent url(http://2.bp.blogspot.com/-sy3zWYyTWLg/TWpAOl7v1II/AAAAAAAAAt4/GZ4veAPRe_Q/s1600/Arrow-Left%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;<br /> display:block;<br /> height:34px;<br /> width:31px;<br /> }<br /> #nextBtn a {<br /> background:transparent url(http://1.bp.blogspot.com/-ri5ctN5jxp4/TWpARdezqDI/AAAAAAAAAuA/dfmkoYxhjew/s1600/Arrow-Right%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;<br /> }<br /> #slider img {<br /> background:#ccc;<br /> padding:5px;<br /> width:200px;<br /> height:100px;<br /> }<br /> <br />

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

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

Lalu Simpan.

Untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan, dan klik tulisan Add New Widget atau Tambah Gadget.

<br /> <br /> <div id="contentSlider"><div id="slider"><ul> <li><a href="#" target=_blank"><img alt="pemandangan 1" src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/196020_190169544355382_100000870146832_421513_4827058_n.jpg" /></a></li> <li><a href="#"><img alt="pemandangan 2" src="http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc3/17537_103535096337019_100000415882856_95787_7621939_n.jpg"/></a></li> <li><a href="#"><img alt="pemandangan 3" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/187174_100000870146832_649329_n.jpg"/></a></li> </ul></div></div><br /> <br />

lalu simpan.

ket:
-http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/196020_190169544355382_100000870146832_421513_4827058_n.jpg

-http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc3/17537_103535096337019_100000415882856_95787_7621939_n.jpg
 

-http://profile.ak.fbcdn.net/hprofile-ak-snc4/187174_100000870146832_649329_n.jpg

adalah url foto yang akan tampil. Ganti url tersebut dengan url foto kamu.