Membuat Recent Post Efek Slide Plus Thumbnails

Ada seorang pengunjung saya yang bertanya bagaimana membuat recentpost yang ada pada blog saya yang tampil cukup menarik dengan efek slide berjalan turun bergantian secara terus menerus.

"trus di sebelah kanannya ada menu RECENT POST. Nah ini Mas.Kok aku gak bisa nampilin posting2 di menu itu ya?yang gambar2nya bisa naik-turun itu loh..."

Widget ini berbasis JSON dan jQuery yang relatif mudah untuk diedit tampilan warna, jumlah post, tulisan maupun besar thumbnail gambarnya.

Caranya sebagai berikut, langsung saja pada akun blogger anda pilih menu Rancangan/Design, Tambah Elemen dengan pilihan Html Javascript, kemudian tambahkan kode dibawah ini :

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#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:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;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://denidi.googlecode.com/files/recentpostslidethumbnail.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 = 10;
var numchars = 100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Simpan.

Untuk edit tampilan perhatikan yang saya beri huruf tebal adalah untuk mengatur border/garis tepi, warna background, jenis dan warna huruf, ukuran thumbnail gambar yang pasti sudah banyak di mengerti oleh para blogger.

var speed = 400;
var pause = 2500;
kode ini untuk mengatur kecepatan dan lamanya artikel berhenti sebentar/ pause

var numposts = 10;
var numchars = 100;

kode ini untuk mengatur jumlah posting yang mau ditampilkan dan berapa jumlah karakter post yang akan ditampilkan.

Kalau anda ingin menampilkan recent post dari blog lain (memanggil feed) anda bisa mengganti kode ini :

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

Contoh aja, menjadi :

<script src="http://blog.denidi.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

Semoga bermanfaat.