Cara Memasang atau Membuat Widget Auto Gambar Slide Show untuk Blogger Blogspot

1komentar

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 supayatampilan 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:
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
Nah,hasilnya (jika saya belum merubah template) sobat bisa lihat di atas posting blog ini,lihat gambar:
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger

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 icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(1)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(2)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(3)
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),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(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>
Lalu simpan templates sobat,apakah samapi disini sudah selesai,tentu belum gan,giliran kita sekarang membuat widgetnya icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
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)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(4)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(5)
Selanjutnya pilih HTML/Javascript lihat Gb(5)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/pelajar

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 sob:

 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger

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

 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger

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 icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger

 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(1)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(2)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),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(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>
Lalu simpan templates sobat,apakah samapi disini sudah selesai,tentu belum gan,giliran kita sekarang membuat widgetnya icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
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)

 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(4)
 Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)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 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 icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
an%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 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 icon biggrin Membuat Widget Gambar Slide Show / Slideshow  Javascript dan Css di Blogger
Share this article :

+ komentar + 1 komentar

Poskan Komentar

Ayo gan Komentarnya jangan lupa,,,biar tambah semangat yang upload juga update artikelnya, kalau ada link yang mati laporkan juga disini ya...

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. //X-route: - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger