Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
<script src='http://iblognet-codes.googlecode.com/files/jquery-1.5.2.min.js' type='text/javascript'/>
<script src='http://iblognet-codes.googlecode.com/files/jquery.skitter.min.js' type='text/javascript'/>
<script src='http://iblognet-codes.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://iblognet-codes.googlecode.com/files/jquery.animate-colors-min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-boxskitter.js'/>
<style type='text/css'>
.box_skitter{position:relative; width:530px; height:250px; background:#000}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden; position:relative}
.box_skitter .image{overflow:hidden}
.box_skitter .image img{display:none}
.box_skitter .box_clone{position:absolute; top:0; left:0; width:100px; overflow:hidden; display:none; z-index:20}
.box_skitter .box_clone img{position:absolute; top:0; left:0; z-index:20}
.box_skitter .prev_button{position:absolute; top:50%; left:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglEdUSc2W6WctmQHjLZ_55tPfKDuKGNaeJlo0satkn911WWplo_2xX48Bcl-n6JZvNItYYDRr7007gisHdVmYEZahrmXlsqyn0k5uCLaMKw0MYV8zh-No70SV1s2TXnucSl8dVnT9Io7i-/s1600/prev.png) no-repeat left top}
.box_skitter .next_button{position:absolute; top:50%; right:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYt8IixluapzUizksurcrzGiRkLKbCnfmo-049ZTPXvvydJPbMB2D4knNk_kuo3xG6p8nIbAFecxMIqkY0UW_MME7ThSdRhOZqDr8m0Yg2aDvgW1dZhmHTEFtz52LVNCBBaPEw6MiT-g_9/s1600/next.png) no-repeat left top}
.box_skitter .info_slide{position:absolute; top:15px; left:15px; z-index:100; background:#000; color:#fff; font:bold 11px arial; padding:5px 0 5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:0.75}
.box_skitter .info_slide .image_number{background:#333; float:left; padding:2px 10px; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00; float:left; padding:2px 10px; margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative; overflow:hidden; height:50px}
.box_skitter .info_slide_thumb{-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; overflow:hidden; height:45px; top:auto; bottom:-5px; left:-5px; padding:5px; opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden; width:70px; height:40px; position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute; top:-50px; left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute; bottom:60px; left:50px; background:#ccc; background:-moz-linear-gradient(-90deg,#555,#fff); background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff)); width:200px; height:10px; overflow:hidden; text-indent:-9999em; z-index:101; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; cursor:pointer; border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute; bottom:-40px; z-index:100; padding:5px 0 5px 5px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333; float:left; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:18px; height:18px; text-indent:-9999em; overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00; float:left; margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:150; position:absolute; bottom:0px; left:0px; display:none; opacity:0.9; background:#000; padding:2px 10px; margin:0 5px 0 0}
.loading{position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px; color:#fff; text-indent:-9999em; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0xLxKGP-gmhOk-o1z8-Q9U7OCgEQlvrlVEkybqHeFK26tSeYqWtmKRUu2sREsKDaVbxlZiKJcLcvGQmc-1HDo8eWRIBRD7Q-EIHYf1kggY8Qk3bZiA-CSO2w75mfF_T9BMgiTrla0YqjI/s1600/ajax-loader.gif) no-repeat left top; width:32px; height:32px}
.box_skitter_large{width:800px; height:200px}
.box_skitter_small{width:200px; height:200px}
</style>
Klik Simpan Template
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<div class="box_skitter box_skitter_large">Catatan: lebih baik ukuran gambar 520px X 210px. Bila anda ingin menambah jumlah artikel yang akan ditampilkan, copy kode merah lalu pastekan sebelum kode biru.
<ul>
<li>
<a href="MASUKKAN LINK ARTIKEL DI SINI"><img src="MASUKKAN ALAMAT GAMBAR ARTIKEL DI SINI" class="cube" /></a>
<div class="label_text">
<p><a href="MASUKKAN LINK ARTIKEL DI SINI" target="_blank">MASUKKAN JUDUL ARTIKEL DI SINI</a></p>
</div>
</li>
<li>
<a href="MASUKKAN LINK ARTIKEL DI SINI"><img src="MASUKKAN ALAMAT GAMBAR ARTIKEL DI SINI" class="cube" /></a>
<div class="label_text">
<p><a href="MASUKKAN LINK ARTIKEL DI SINI" target="_blank">MASUKKAN JUDUL ARTIKEL DI SINI</a></p>
</div>
</li>
<li>
<a href="MASUKKAN LINK ARTIKEL DI SINI"><img src="MASUKKAN ALAMAT GAMBAR ARTIKEL DI SINI" class="cube" /></a>
<div class="label_text">
<p><a href="MASUKKAN LINK ARTIKEL DI SINI" target="_blank">MASUKKAN JUDUL ARTIKEL DI SINI</a></p>
</div>
</li>
<li>
<a href="MASUKKAN LINK ARTIKEL DI SINI"><img src="MASUKKAN ALAMAT GAMBAR ARTIKEL DI SINI" class="cube" /></a>
<div class="label_text">
<p><a href="MASUKKAN LINK ARTIKEL DI SINI" target="_blank">MASUKKAN JUDUL ARTIKEL DI SINI</a></p>
</div>
</li>
</ul>
</div>
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
"keep spirits and do the best"
