Cara Membuat Widget Recent Post Animasi Berjalan

Recent Post adalah Widget yang berisi tentang postingan atau artikel yang terakhir penulis publikasikan di suatu blog atau website, apabila pengunjung melihat widget ini  pengunjung akan langsung dapat mengetahui informasi terbaru dari sebuah blog. Widget Recent Post yang memiliki animasi gerak terkadang memiliki daya tarik tersendiri untuk sebuah blog meski blog tersebut hanya blog biasa.

Berikut ini adalah cara-cara atau langkah langkah dalam pembuatan Recent Post Bergerak.

1. Login ke Blog anda.
2. Pilih Blog mana yang akan ditambahkan Wiidget Recent Post.
3. Pilih Tata Letak.
4. Pilih Tambahkan Gatget.
5. Pilih Tambahkan HTML/JavaScript.
6. Salin kode dibawah ini :

<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#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:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

7.Isi Kode diatas pada kolom HTML/JavaScript.
8. Simpan.

Demikianlah langkah-langkah membuat Recent Post bergerak dan semoga berhasil dalam melakukannya. Terima Kasih telah berkunjung dan jangan lupa berkunjung lagi.

Lihat juga Postingan Mempercantik Blog yang lain :
Cara Membuat Populer Post Lebih Menarik dan Unik.
Cara Membuat Widget Label Blog Unik.