Browse > Home >
Tips dan trik
> cara membuat slideshow widget untuk gambar di blogger
cara membuat slideshow widget untuk gambar di blogger
cara membuat slideshow widget untuk gambar di blogger~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:
Untuk screenshotnya,lihat gambar dibawah ini ya sob:
Nah,hasilnya (jika saya belum merubah template) sobat bisa lihat di atas posting blog ini,lihat gambar:
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
Lihat Gambar ya :D
(1)
(2)
(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(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
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)
(4)
(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 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
sumber
Artikel Menarik Lainnya
Tips dan trik
- cara cepat root android terbaru
- Cara Install Dan Konfigurasi Dhcp Server
- Cara Memasang Anchor Text Di Blog
- Cara Membuat Meta Tag Otomatis Pada Setiap Postingan
- Cara Menampilkan Gambar Posting Blog Di Pencarian Google
- Resep Macam - Macam Kue Bolu
- Cara Submit Blog Ke Bing
- Cara Membuat Sitemap Di Blog
- Cara Mengganti Template Blog
- Cara Membuat Kotak Blogroll Dan Marquee
- Contoh Pidato Bahasa Inggris
- Cara Instalasi Windows Server 2003
- Cara Mendaftar Dan Memasang Iklan SITTI Di Blog
- Cara Verifikasi Paypal Menggunakan Kartu Bank Niaga
- Cara Membuat Tombol Share Facebook Twitter Dan Google Plus
- Cara Membuat Pancake Cokelat Dan Durian
- Cara Memasang Fans Page Facebook Di Blog
- Resep Dan Cara Membuat Rainbow Cake
- Cara Membuat Tombol Follow Twitter Di Blog
- Cara Mempercepat Koneksi Internet Modem
- Cara Membuat Daftar Isi Blog Dengan Scroll
- Cara Cepat Meningkatkan Pengunjung Dengan SEO
- Cara Mempercepat Loading Blog
- Cara Membuat Iklan Melayang Di Blog
- Cara install linux Debian Lenny
cara membuat slideshow widget untuk gambar di blogger
Diulas oleh 798 Pembaca Tips Blogging And Computer
5
Jumat, 16 Maret 2012
Langganan:
Posting Komentar (Atom)
1 Responses to “cara membuat slideshow widget untuk gambar di blogger”
thanks atas infonya gan
http://ebeng11.blogspot.com/ 31 Maret 2012 pukul 22.50
Posting Komentar