pasang slide di blog

·

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 sob:
Cara Pasang Slide Show Foto Di Blog.


Nah,hasilnya (jika saya belum merubah template) sobat bisa lihat di atas posting blog ini,lihat gambar:

Cara membuat slideshow di blog.

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



Langkahnya sangat sederhana,sobat 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

Slide Show Gambar Gadget Untuk Blogger.
(1)



membuat gambar slideshow di blog.
(2)



Membuat Slideshow Foto.
(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 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:



  • pemandangan 1
  • pemandangan 2
  • pemandangan 3


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

Support by Sponsor

Menabung Pintar

QRZ callsign lookup:
Callsign lookups provided by qrz.com

Archivo