Huffss..
Selsai juga neg pesenan..



Slide Show Humble Sticker ini adalah pembaruan dari Slide Show Humble jQuery yang
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() {
$(&#39;.newsticker-jcarousellite&#39;).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..