Widget Slide Recent Post With Thumbnail

Advertisemen

Membuat slide recent posting dengan thumbnail, yang pastinya akan membuat blog kita lebih menarik dan keren... keuntungan lain dari tool ini yaitu bisa menampilkan hampir semua recent yang kita posting sebelumnya, karena memang dengan gaya slide, jadi recent post akan muncul secara bergatian. menarik kan ?? nah bila sobat masih bingung dengan apa yang saya maksud diatas, sobat bisa lihat screenshotnya dibawah ini.

Screenshot

Bila ingin membuatnya, ikuti langkah-langkah berikut ini:

• Login dengan akun blogger sobat
• Masuk rancangan/design
• Pilih Tata Letak/Layout
• Klik Add a gadget, dan pilih HTML/Javascript
• Selanjutnya, Copy Paste kode berikut didalamnya:

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

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

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

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

-->
</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 = 20;
home_page = "http://nama-blog-sobat.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="https://sites.google.com/site/kodeblogger/javascript/rpts-kode-blogger.js" type="text/javascript"></script>
</div>

• Simpan/Save Template.

Penting!!
Perhatikan Text yang diberi warna merah, gantilah dengan alamat blog sobat.
Sekian dari saya semoga bermanfaat.

Sumber: serba-seru.blogspot.com

Advertisemen

 Blog Widget