By Girant_31
Huffss..
Selsai juga neg pesenan..
ternyata jauh diluar permintaan..
Maklum, namanya jg newbie..
ya bikin nya juga sampe mentok az.. hehe..
Ok.. Slide Show Humble Sticker kali ini Insya Allah sudah kumplit dibanding dg yg kemarin..
Cocok banget buat yg punya segudang banner.. yg dilengkapi dg :
1. Auto Slide
2. Auto Break
3. Auto Hover Pause
4. Auto Link
5. Keterangan Banner or Gambar yg dipasang
6. dan tetek bengek yg lain nya.. hehe..
Penasaran seperti apa ???
Lihat demonya :
Demo Slide Show Humble StickerKlik disini untuk melihat demo Slide Show Humble Sticker
Gimana ???
Masih ada yang kurang ???
Low ada, Sampaikan saja di kolom komentar di blog Girant_31 ini, Ok !!
To the point..
Langkah 1
Letakan Kode dibawah ini diatas kode ]]></b:skin>
* { margin:0; padding:0; } #newsticker-demo { width:310px; background:#EAF4F5; border:3px solid #000; -moz-border-radius-topleft:25px; -moz-border-radius-topright:25px; -moz-border-radius-bottomleft:25px; -moz-border-radius-bottomright:25px; padding:5px 5px 0; font-family:Verdana,Arial,Sans-Serif; font-size:12px; margin:20px auto; } #newsticker-demo a { text-decoration:none; } #newsticker-demo img { border: 2px solid #FFFFFF; } #newsticker-demo .title { text-align:center; font-size:14px; font-weight:bold; padding:5px; } .newsticker-jcarousellite { width:300px; } .newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; } .newsticker-jcarousellite .thumbnail { float:left; width:300px; } .newsticker-jcarousellite .info { float:right; width:0px; } .newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; } .clear { clear: both; }
Langkah 2
Cari kode </head> lalu Letakan Kode dibawah ini diatasnya
<link href='style.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://daftarisi-girant.googlecode.com/files/jquery-latest.pack.js' type='text/javascript'/> <script src='http://daftarisi-girant.googlecode.com/files/jcarousellite_1.0.1c4.js' type='text/javascript'/> <script type='text/javascript'> $(function() { $('.newsticker-jcarousellite').jCarouselLite({ vertical: true, hoverPause:true, visible: 1, auto:500, speed:1000 }); }); </script>
Langkah 3
Save template
Langkah 4
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script
<div id="newsticker-demo">
<div class="title">Slide Show Humble Sticker</div>
<div class="newsticker-jcarousellite">
<center><ul>
<li><div class="thumbnail">
<a href="LINK-IMAGE-1"><img src="URL IMAGE-1" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
<li><div class="thumbnail">
<a href="LINK-IMAGE-2"><img src="URL IMAGE-2" /></a><br />
<a href="LINK">INFO LINK</a>
</div></li>
</ul></center>
</div></div>
- Ganti tulisan Slide Show Humble Sticker dengan judul slide show sesuai keinginan.
- Ganti tulisan LINK-IMAGE-1, dan LINK-IMAGE-2 dengan link banner or gambar punya sobat.
- Ganti tulisan URL IMAGE-1, dan URL IMAGE-2 dengan URL banner or gambar punya sobat.
- Ganti tulisan LINK dengan link keterangan banner or gambar punya sobat.
- Ganti tulisan INFO LINK dengan tulisan keterangan banner or gambar punya sobat.
Source Code Slide Show Humble StickerKlik disini untuk mengambil semua source code Slide Show Humble Sticker
Langkah 5
Save dan Preview hasilnya.
Langkah 6
Selesai.
Semoga Bermanfaat bt sobat semua..
Terima kasih..
jQuery
,
Tips n Trik
Title Posted By On Tag Comments Subscribe |
: Slide Show Humble Sticker : Agus Adi S. From Girant_31 Blog : Senin, Juni 07, 2010 : jQuery , Tips n Trik : 41 People Commented : RSS Feed or leave a response for this article, Here. |
mantap dah tutorialnya
terima kasih sob
Thanks jg mas ats kunjungan nya..
Buat gambar apa az cocok ko mas..
asal jangan yg terlalu besar az resulusi gambarnya mas..
Justru cocoknya bt di widget sidebar pak liek..
coz ni diciptakan bt memperirit ruang
yg kebanyakan banner or iklan gitu pak..
Thanks mas dh mampir..
Makasih..
infonya kayanya OK nih,meskipun sekali lagi aku plg susah mencerna kode2 ajaib ini hehehe :D
Hehehe.....
Boleh juga nih infonya, keren.... :)
Kalo diterain di WP, gak bisa nih :D
Tapi mantap gan :)
Kayaknya sih mba..
Seneng apanya..
Pusing mas.. hehehe..
Makasih..
Semoga bermanfaat ya..
Iya ga bs mas..
Coz, katanya sih wp ga suport gt ma java scropt..
tp ga tw jg mas..
coz ane blm punya akun wp mas..
Monggo mas...
Pandai amat kawan ini ya
salamd alam petsahabatan
bingung mau ngisi apa buat slide show yg akan kupasang diblog :D
Pandai ngibul ya mas?? hehe
Salam jg sobat..
Pasang az photo2 ane mas.. xixixi..
semoga lancar dan sukses selalu
terima kasih
Ya gitu dech mas..
Silahkan mas..
Sama-sama ya mas..
Terimakasih ats kunjungan nya..
Makasih ya sob sdh memfollow blog jelek ini..
Insya Allah secepatnya ane follow balik..
BTW,blajar dimana sob?
ah mas berlebihan... biasa aja mas cuma notak/ik..
ya ini juga alhamdulillah mas bisa sedikit2...
semoga bermanfaat mas...
terimakasih sudah berkunjung....