Membuat Recent Post Slide Thumbnail (Move Down)

Tutorial blog kali ini membahas cara membuat recent post slide dengan thumbnail/gambar, recent post atau postingan terbaru sangat penting untuk diterapkan pada sebuah blog karena berfungsi menampilkan semua judul artikel terbaru yang telah anda buat. Recent post kali ini bekerja dengan cara slide show, yaitu menampilkan artikel dengan gambar secara bergantian dari atas ke bawah.

Kelebihan recent post slide ini diantaranya, dapat menampilkan judul artikel yang sudah diterbitkan sesuai dengan keinginan kita, baik artikel yang baru maupun yang lama. Widget ini juga telah diterapkan pada blog ini karena sangat berguna dan membantu bagi para visitor yang kebetulan berkunjung kemari. Untuk melihat Demo recent post slide ini silahkan lihat pada sidebar sebelah kanan pada blog ini.

Berikut cara membuat recent post slide thumbnail khusus untuk blog yang menggunakan platform blogger :

1. Login ke blog anda.
2. Pilih Rancangan kemudian klik Add Gadget.
3. Pilih Html/JavaScript.
4. Kemudian masukkan kode berikut :

<style type="text/css">
#rp_plus_img{height:550px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:#FFF}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:108px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:15px;}
#rp_plus_img .news-text{display:block;font-size:14px;font-weight:normal !important;color:#333333;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jendrix.googlecode.com/files/sliderrecentposts.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Keterangan:
background-color           : #FFF Warna untuk background, ubah sesuai selera.
#rp_plus_img                  : 550px Tinggi kotak slide, sesuaikan dengan template anda.
#rp_plus_img a               : #000000 Warna judul artikel, ubah sesuai selera.
#rp_plus_img .news-text : #333333 Warna untuk text artikel, ubah sesuai selera.
#rp_plus_img img           : width:55px;height:55px Ukuran lebar dan tinggi gambar.
var numposts                  : 20 Jumlah artikel yang akan ditampilkan pada slide.
var numchars                  : 125 Jumlah text artikel yang akan di tampilkan.

6. Simpan jika sudah selesai dan cek terlebih dahulu apakah sudah ada recent post slidenya atau belum.