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; }
* { 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>
<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....
wuih, tutorial yg keren sob, thx sharenya...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Thanks jg mas ats kunjungan nya..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Aku save dulu ya mas...yang ini emang lebih komplet...cuma masih bingung buat Slide yang mau ditampilkan...mungkin kalo buat iklan malah cocok ya...?
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Buat gambar apa az cocok ko mas..
asal jangan yg terlalu besar az resulusi gambarnya mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
bagus .... apa bisa dipasang disidebar ...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Justru cocoknya bt di widget sidebar pak liek..
coz ni diciptakan bt memperirit ruang
yg kebanyakan banner or iklan gitu pak..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Mampir lg mas...mantap info na
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Thanks mas dh mampir..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kunjungan pagi hari
mantap dah tutorialnya
terima kasih sob
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Makasih..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
selamat siang girant...
infonya kayanya OK nih,meskipun sekali lagi aku plg susah mencerna kode2 ajaib ini hehehe :D
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Kayaknya sih mba..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Wuih, senangnyo bermain jquery...
Hehehe.....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Seneng apanya..
Pusing mas.. hehehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Owh...gitu tooo....
Boleh juga nih infonya, keren.... :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Makasih..
Semoga bermanfaat ya..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Ooow..untuk Blogger yah?
Kalo diterain di WP, gak bisa nih :D
Tapi mantap gan :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
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..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
keren sob, aq save dulu yah
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kren sob aq save dulu yah, mangtab dah
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Monggo mas...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Thank kawan.
Pandai amat kawan ini ya
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Pandai ngibul ya mas?? hehe
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mantatrims y om
salamd alam petsahabatan
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Salam jg sobat..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kyknya lagi musim slide2an ya... :D
bingung mau ngisi apa buat slide show yg akan kupasang diblog :D
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Pasang az photo2 ane mas.. xixixi..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
nyari gambar2 bagus dulu brarti buat ngisi slidenya hehe
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Ya gitu dech mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
ku simpen dulu y, ntar ku praktekin
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Silahkan mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kunjungan di pagi hari sob
semoga lancar dan sukses selalu
terima kasih
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Sama-sama ya mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
aku sudah follow, follow balik yaaa :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Makasih ya sob sdh memfollow blog jelek ini..
Insya Allah secepatnya ane follow balik..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
@730362649801172571.0
Terimakasih ats kunjungan nya..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
km emang bnr2 masternya dlm bikin script, tp puyeng jg nih... hehehe...
BTW,blajar dimana sob?
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
ah mas berlebihan... biasa aja mas cuma notak/ik..
ya ini juga alhamdulillah mas bisa sedikit2...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Selalu dpt ilmu disini, oke thnks atas sharenya ya...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
semoga bermanfaat mas...
terimakasih sudah berkunjung....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
malelm juga mas
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.