Cara Membuat Slider Post

Widget ini cara kerjanya sama dengan feature slider yang lain, namun bentuk tampilannya saja. Sekarang mari kita bahas cara membuat slider post, ikuti langkah berikut.

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(http://3.bp.blogspot.com/-_jt7Vtp3obE/ThQHetpTTBI/AAAAAAAABRA/tlKhtvhZurk/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(http://1.bp.blogspot.com/-zJ4s1pUP_uQ/ThQHd8xo7rI/AAAAAAAABQ8/fPAdQpIONm8/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(http://2.bp.blogspot.com/-jOnDqsbXNMo/ThQHUOhk_2I/AAAAAAAABQg/BRmMmWIaTNI/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">
<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>

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.

Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"