Cara memasang atau membuat widget auto gambar slide show untuk blogger blogspot

cara memasang atau membuat widget auto gambar slide show untuk blogger blogspot

Hore! kesempatan update blog lagi nih,lumayan,minggu ini ada job tak terduga jadi ada ongkos lemburan,hihihi (buka rahasia-pent)
Keburu jatah ngnet habis,langsung aja ya gan,yup! kali ini ada trik bagus sob buat ngakalin supaya tampilan slide show untuk gambar di blogger blogspot dapat kita ciptakan secara manual.
Tentu dengan sedikit sentuhan javascript,css dan jQuery (opo iku to mas puji? embuh!aku yo ga ngerti...gubrak!!)

Daripada banyak ngomong malah pada bengong,yo wes yuk cari tahu cara membuat slideshow widget untuk gambar di blogger dengan bantuan javascript dan css.

Untuk screenshotnya,lihat gambar dibawah ini ya :

Nah,hasilnya (kalau gw belum merubah template) bisa kalian bisa lihat di atas posting blog ini,lihat gambar:

Langkah Cara Memasang / Membuat Slide Show Gambar dengan JQuery di Blogger

Langkahnya sangat sederhana,bisa kalian pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)

(2)

(3)

Nah,selanjutnya cari kode ]]> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]> 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 ,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:



Lalu simpan templates bisa kalian,apakah samapi disini sudah selesai,tentu belum gan,giliran kita sekarang membuat widgetnya :D

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

• 



• 



• 

Lalu simpan dan kini bisa kalian sudah memiliki slideshow widget blogspot yang tak kalah menarik kalau dibandingkan slideshow instant widget seperti yang sudah banyak beredar.
Selamat mencoba ya gan and semoga berhasil :D

Ket:

• Kamu hanya merubah kode yang bercetak tebal diatas.
• Untuk tkamu '#' gantilah dengan url tujuan kemana link gambar akan diarahkan,misal:
  http://pelajaran-blog.blogspot.com/2009/04/apa-itu-css.html.
• Untuk gambar bisa kalian 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%2Bpemkamungan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg