01.12.00
Syamsudinnamaku
Featured Image Slider ini berfungsi untuk menampilkan
gambar yang kita suguhkan secara bergiliran layaknya
seperti slide show yang saya yakin anda sudah
mengenalnya. Untuk lebih jelasnya, anda bisa lihat
contohnya seperti terdapat di bawah ini :
Untuk membuatnya tidaklah begitu sulit.
Ikuti langkahnya seperti berikut ini :
1. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript.
2. Masukkan ke dalam kontennya
kode yang di bawah ini :
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="URL Gambar Kecil 01 Di Sini" /><span><b>01</b></span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="URL Gambar Kecil 02 Di Sini" /><span><b>02</b></span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="URL Gambar Kecil 03 Di Sini" /><span><b>03</b></span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="URL Gambar Kecil 04 Di Sini" /><span><b>04</b></span></a></li>
</ul>
<!-- First Image -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="URL Gambar Besar 01 Di Sini" />
<div class="info" >
<a href="#" ><center><b>Judul Gambar 01 Di Sini</b></center></a>
<p>Keterangan Gambar 01</p>
</div>
</div>
<!-- Second Image -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="URL Gambar Besar 02 Di Sini" />
<div class="info" >
<a href="#" ><center><b>Judul Gambar 02 Di Sini</b></center></a>
<p>Keterangan Gambar 02</p>
</div>
</div>
<!-- Third Image -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="URL Gambar Besar 03 Di Sini" />
<div class="info" >
<a href="#" ><center><b>Judul Gambar 03 Di Sini</b></center></a>
<p>Keterangan Gambar 03</p>
</div>
</div>
<!-- Fourth Image -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="URL Gambar Besar 04 Di Sini" />
<div class="info" >
<a href="#" ><center><b>Judul Gambar 04 Di Sini</b></center></a>
<p>Keterangan Gambar 04</p>
</div>
</div></div>
KETERANGAN =
Gantilah ke-4 (empat) gambar kecil dan besarnya
dengan gambar yang anda inginkan, pada kode :
URL Gambar Kecil Di Sini
URL Gambar Besar Di Sini
Tuliskan judul dan keterangan gambar yang
terdapat pada kode di atas.
3. Lalu masuk ke Edit HTML
4. Cari kode </b:skin>
5. Letakkan sebelum kode </b:skin>
kode yang berikut ini :
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | #featured{
width:250px;
padding-right:120px;
position:relative;
height:250px;
background:#ffffff;
border:5px solid #00cc99;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:250px;
list-style:none;
padding:0; margin:0;
width:120px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:10px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:9px; font-family:Verdana;
line-height:17px;
}
#featured .ui-tabs-panel{
width:250px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#336633; background:#fff;
line-height:19px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('http://i54.tinypic.com/16iv56q.png') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#66ffcc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 250px;
background: url('http://i55.tinypic.com/2nvgd9u.png');
}
#featured .info h2{
font-size:15px; font-family:Verdana Bold, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
} |
6. Kemudian cari lagi kode </head>
Letakkan di atasnya, kode berikut ini :
7. Simpan template anda, selesai.
Selamat mencoba, good luck!
6 comments:
posting yg keren gan,
mampir juga di http://jogja-mmedia.blogspot.com/
Maksimal, di cari2 nemu juga,,,
cara ke 5 ga bisa di copy cripnya
klo pada postingan bagaimana caranya apakah harus edt template juga?
,mohon penjelasannya terimah kasih
mantab banget sob, makasih banyak ya..
Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya...salam sukses buat admin.
Posting Komentar