Cara Membuat Recent Post Slideshow

Recent Post atau dalam bahasa indonesia di sebut Postingan Terbaru (postingan terakhir yang kita tulis) adalah satu widget yang sering digunakan oleh para blogger. Manfaat dari menggunakan widget ini sangat banyak, salah satu manfaatanya adalah kita bisa mempromosikan artikel-artikel yang telah kita buat. Namun menurut saya, sebenarnya kegunaan dari widget ini tergantung dari kita masing-masing. Mungkin ada yang mengatakan bahwa recent post bisa membuat template menjadi SEO friendly, karena memudahkan pengunjung untuk melihat isi-isi artikel terbaru kita. Di pihak lain mungkin memasang widget ini untuk mempercantik tampilan / halaman blog mereka.

Nah, di kesempatan kali ini Blog Info dan Tutorial ingin berbagi mengenai cara membuat recent post slideshow di blog. Mungkin sobat sudah sering melihat recent post yang bisa bergerak di beberapa blog / website yang pernah sobat kunjungi. Contoh gambar recent post disamping ini saya ambil dari salah satu blog saya yang beralamatkan di http://www.andrereviews.com/2012/04/cara-membuat-recent-post-slideshow.html. Dan jika sobat tertarik untuk membuatnya, silahkan ikuti tutorialnya di bawah ini :

1.Login ke akun Blogger sobat.

2.Pilih Tata-Letak - Tambah Gadget

3.Pilih elemen HTML/JavaScript

4.Copy dan paste kan kode dibawah ini pada elemen HTML/JavaScript:

<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.graisdownloadapasaja.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>

Note :
. Ganti Url berwarna merah dengan Url Sobat.

5.Klik Save/Simpan. Selesai!

Bagaimana, cukup mudahkan membuatnya? Semoga sukses... ^_^
Sumber: http://www.andrereviews.com/2012/04/cara-membuat-recent-post-slideshow.html