"MCHOYBLOGINFO". Diberdayakan oleh Blogger.

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

Share on :

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 (heleh!!)

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 ]]></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 sampe 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:

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

Ket:


  • Anda hanya merubah kode yang berwarna merah 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://l.yimg.com/bt/api/res/1.2/kV0L3D40XsMrjoYgUrRXGw--/YXBwaWQ9eW5ld3M7cT04NTt3PTIwMA--/http://l.yimg.com/os/401/2012/02/16/AP050725014760-jpg_104402.jpg

Sumber Info


1 komentar:

Info Wisata

 photo freebanner_zps107bd00d.gif Info Hub. 0899 8 933339 Rumah Subsidi

Pengikut

Related Post

Arsip Blog

Info Musik