Cara Membuat Slide Recent Post

Berikut adalah cara menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena slide, berarti terus bergerak dan bergantian. Widget slide recent post ini cocok dipasang di sidebar.

Cara Membuat Slide Recent Post

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<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 {
height: 220px;
margin-top: 5px;
overflow: hidden;
padding: 0;
}
#spylist ul {
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 300px;
}
#spylist li {
background: url("http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg") repeat-x scroll 0 -30px #ccc;
border: 1px ;
float: none;
height: 55px;
list-style-type: none;
margin: 0px 0px 2px 0px;
overflow: hidden;
padding: 0px 60px 0px 0px;
width: 216px;
}
#spylist li a {
color: #4B545B;
font-size: 11px;
height: 16px;
margin: 0;
overflow: hidden;
padding: 0 0 2px;
text-decoration: none;
}
#spylist li img {
background: none repeat scroll 0 0 #EFEFEF;
border: 0 none;
float: left;
margin-right: 5px;
}
.spydate {
color: #0284C2;
font-family: Tahoma,Arial,verdana,sans-serif;
font-size: 10px;
height: 0px;
margin: 1px 0 0;
overflow: hidden;
padding: 2px 0;
}
.spycomment {
color: #262B2F;
font-family: Tahoma,Arial,verdana,sans-serif;
font-size: 10px;
margin: 0;
overflow: hidden;
padding: 0;
}
-->
</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 = 50;
thumbheight = 50;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NAMABLOG.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>

*) keterangan:
“numposts = 10” adalah total posting yang akan ditampilkan.
Ganti tulisan “http://NAMABLOG.blogspot.com/”dengan nama blog anda.


Sekian dan terima kasih, Jangan lupa comentarnya ya,, ^_^