Slide Show Humble Sticker
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..
Posted by Girant_31
on 07.16. Filed under
jQuery,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
wuih, tutorial yg keren sob, thx sharenya...
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...?
bagus .... apa bisa dipasang disidebar ...
Mampir lg mas...mantap info na
kunjungan pagi hari
mantap dah tutorialnya
terima kasih sob
@1416216820602241400.0
Buat gambar apa az cocok ko mas..
asal jangan yg terlalu besar az resulusi gambarnya mas..
@4062986685868876681.0
Justru cocoknya bt di widget sidebar pak liek..
coz ni diciptakan bt memperirit ruang
yg kebanyakan banner or iklan gitu pak..
@3783127255773230672.0
Makasih..
@5924086174945596663.0
Thanks mas dh mampir..
selamat siang girant...
infonya kayanya OK nih,meskipun sekali lagi aku plg susah mencerna kode2 ajaib ini hehehe :D
Wuih, senangnyo bermain jquery...
Hehehe.....
Owh...gitu tooo....
Boleh juga nih infonya, keren.... :)
Ooow..untuk Blogger yah?
Kalo diterain di WP, gak bisa nih :D
Tapi mantap gan :)
@2013833987856073935.0
Seneng apanya..
Pusing mas.. hehehe..
@8033032742055993206.0
Monggo mas...
@8088150529459030089.0
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..
Thank kawan.
Pandai amat kawan ini ya
mantatrims y om
salamd alam petsahabatan
kyknya lagi musim slide2an ya... :D
bingung mau ngisi apa buat slide show yg akan kupasang diblog :D
@7538832245063112103.0
Pandai ngibul ya mas?? hehe
ku simpen dulu y, ntar ku praktekin
kunjungan di pagi hari sob
semoga lancar dan sukses selalu
terima kasih
berkunjung dengan senyuman...
aku sudah follow, follow balik yaaa :)
@2512648612895411268.0
Ya gitu dech mas..
@730362649801172571.0
Terimakasih ats kunjungan nya..
@8753635958481054639.0
Sama-sama ya mas..
@1775991172584687068.0
Makasih ya sob sdh memfollow blog jelek ini..
Insya Allah secepatnya ane follow balik..
Selalu dpt ilmu disini, oke thnks atas sharenya ya...
km emang bnr2 masternya dlm bikin script, tp puyeng jg nih... hehehe...
BTW,blajar dimana sob?
@5835513709985715094.0
semoga bermanfaat mas...
terimakasih sudah berkunjung....
malelm juga mas