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

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


















Cara Pasang Slide Show Foto Di Blog.









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


Langkahnya sangat sederhana,sobat:
1.pilih Dashboard lalu pilih Tata Letak / Rancangan
2. kemudian pilih tab Edit HTML
3.lalu seperti biasa contreng tulisan Exspand Widget Templates.












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 sobat,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)


Cara membuat Slideshow Gambar (with jQuery).
(4)

Cara membuat slide show widget foto gallery di blog.
(5)


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

• 



• 



• 

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

Ket:

Anda hanya merubah kode yang bercetak tebal 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




Klik tombol 'Buat Popular Post' di bawah ini jika anda merasa konten/postingan yang sedang anda baca sangat menarik dan bermanfaat bagi anda.