Cara membuat recent post berjalan | tutorial lengkap

Kali ini Admin akan membahas sedikit tentang elemen blog, tepatnya recent post.
Ada yang belum tau recent post? Recent post adalah salah satu elemen blog yang biasanya di pasang di sidebar blog. Selain itu recent post juga sering disebut dengan popular post, popular entry, artikel populer, atau entri populer.
beberapa fungsi/ manfaat recent post berjalan yang akan kita buat ini :
1. menarik pengunjung, bentuk elemen yang akan kita buat ini cenderung elegan dan indah karena akan ada slide show berjalan di sidebar blog anda.
2. dapat menggantikan fitur "Artikel terkait"
3. dapat digunakan sebagai pengganti "Slide postingan"

Masuk ke tahap inti, Admin akan menjelaskan langkah-langkah unntuk membuat Recent post berjalan di blog (khususnya blogger, untuk wordpress belum saya coba) :
1. sign in ke blogger.

2. Tata letak
3. Tambah gadget
4. pilih html/ javascript

5. beri judul yang anda inginkan di kotak 'judul'
6. masukkan kode berikut di kotak 'konten' :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--


#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}


#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}


.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


-->
</style>


<script language='JavaScript'> 


imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;


boxwidth = 255;


cellspacing = 6;


borderColor = "#232c35";


bgTD = "#000000";


thumbwidth = 70;


thumbheight = 70;


fntsize = 12;


acolor = "#666";


aBold = true;


icon = " ";


text = "comments";


showPostDate = true;


summaryPost = 40;


summaryFontsize = 10;


summaryColor = "#666";


icon2 = " ";


numposts = 10;


home_page = "http://www.i-khoirudin.blogspot.com/";


limitspy=4
intervalspy=4000


</script>


<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

7. ganti tulisan berwarna merah dengan url home page blog anda.
8. pilih simpan

untuk contohnya bisa anda lihat  disini
insyaAlloh Recent post berjalan ini akan terlihat sangat indah, sebenarnya saya juga ingin memasangnya tetapi html browser saya sedang error jadi tidak bisa memasangnya secara optimal

bila terjadi kegagalan atau kurang jelas silahkan manfaatkan fitur kotak komentar, atau bakar aja rumah anda