Cara Membuat Recent Post Berjalan di Blog

Hai sobat blogger, malem-malem gak bisa tidur, trus ditemeni facebook, plus blogging, dan ternyata ada yang tanya kepada saya tentang cara membuat recent post berjalan, buat dah nih tutorial, itung-itung hari ini baru satu artikel yang saya buat.

Penjelasannya singkat saja, recent post adalah kumpulan post yang pernah kita buat di blog kita yang kita tampilkan secara acak  bisa sebagai widget atau post baru, tapi yang saya bahas untuk kali ini adalah recent post yang dibuat untuk widget disertai dengan animasi efek berjalan pada recent post tadi, sehingga yang ditampilkan banyak dan terus berganti seiap saat.

Untuk membuatnya sangat mudah, tapi bagi yang ingin melihat contonya ada di sidebar blog ini (update 6 februari 2013), mungkin jika sobat mengunjungi blog ini sudah saya ganti berarti sudah tidak ada, dan saya berikan screenshotnya 

untuk caranya sangat mudah sekali, dan berikut adalah caranya :

-  masuk dulu pada blogger sobat

-  kemudian masuk pada Tata Letak --> Tambah Gadget

-  pilih gadget HTML/JavaScript

-  kemudian pastekan kode berikut dalam gadget HTML/JavaSript tersebut

<style media="screen" type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:509px;
}
#spylist ul{
width:290px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:290px;
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUx-pMiqNZ7M0PYfHiPtLtWUi1-RRn_UpUHeYwRuhWBsqrC6gIORvXu96mOrz1ZoqHZD5HQkKcNOp4KzUXXoFDTZ97TvBuGjkb5ihKxoQ0SAHpm-SRLkRYbikI_OS-DvuW8e8oKi5o6iY6/h120/No+Image+1.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRIB7sqCF-vG1MjZ41Kr88CXPMYZQwGZbSUQaZGMA9A0twmq1tr5bfeCFCEsGQzt723o4Tu9bIHFjlSmFuzmXyWsMC9kOWRbU65IjP4M8lp2O28lAAvNkAaMiPP86REIfdM3WOQWl3z4i/h120/No+Image+2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NwhDcCHH9qfchdX3SnFmoel7zeJl4V5xdd2n7KMo8k2rlQPEKq0f_BKYDn3x7sgH2lHm5GekzODEJJd4XK-hVsGyUH4iSYp7H2SurmsgQT63m0t6ikHFBQMZf7ofvXEyqWnMvdTyDKtW/h120/No+Image+3.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibR03tJ20JlRkTCWYSFNnW0W3WwuWevKhQUKjw2csVDiCFUFtT_gYTrUL5PeGPENyMj3ceh0d8vshDCrZVNiqKVpvkGBrlxsrDys_WDOUfaccUvqsH-_D_ETc-0mXwIHFM923MLQThxUfI/h120/No+Image+4.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWsjdZXrnEcbe7TCc6IEUD2Yew-Sa6aRQLR0RosB_pVz5AEzYn1AY_IpWRGZ06F22tc1ahB5hQGcWo7aaYdJxCQ49bQF17GRORJ2QG9KPS_OvzkBrfpiOMPuqKBVCxgLfpERtKAQk5EXjG/h120/No+Image+5.gif";
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 = 20;
home_page = "http://pro-duck.blogspot.com/";
limitspy=6
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Ket :
Ganti tulisan yang berwarna Merah dengan alamat blog sobat
Ganti tulisan yang berwarna Biru dengan url gambar yang ditampilkan jika posting sobat ada yang tidak bergambar

Sekian saja yang dapat saya sampaikan untuk kali ini, kurangnya saya mohon maaf, dan semoga artikel ini bermanfaat, terima kasih telah berkunjung...          ^_^

Keyword :
cara memberi recent post berjalan pada blog
recent post bergerak pada blog
popular post bergerak di blog

Pro Duck By Pro Duck Published: 2013-03-06T23:26:00+07:00 Cara Membuat Recent Post Berjalan di Blog 4.5 758 reviews