Membuat Recent Post Untuk Blogger Dengan Thumbnails Dan Simple Spy

Pada post kali ini saya akan mengajar anda bagaimana untuk membuat recent post dengan thumbnail dan simple spy. Widget ini dihasilkan oleh Bloggertricks.com dan animasi oleh Simple Spy. Gaya simple spy ini diambil dari Scarlet theme. Untuk melihat demo tentang widget ini, playkan video di bawah. Terima kasih kepada abu-farhan kerana telah mengabungkan widget ini dengan animasi Simple Spy.

Untuk membuat widget ini, ikuti langkah dibawah.

1. Pilih pada Add a Gadget

2. Pilih pula pada HTML/Javascript

3. Copy kod dibawah dan pastekan pada Gadget anda

<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://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/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://cybernetic88.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Beberapa kod HTML diatas boleh diganti :

1. Alamat Homepage

home_page = "http://cybernetic88.blogspot.com/";

Sila gantikan dengan alamat blogspot anda

2. Style

#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://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

Dari atas style / css, anda boleh menukar :

width

width: 220px;

width: 208px:

Menyesuaikannya berdasarkan template anda

dan

background: # fff url (http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

Menyesuaikan Warna Background

3. Saiz Gambar

thumbwidth = 70;
thumbheight = 70;

Sesuaikan mengikut keperluan anda

4. Berapa banyak posting anda

numposts = 10;

Berdasarkan berapa yang anda ingin munculkan post

Selamat Mencuba =)

If you think this entry useful, just click Facebook Like button bellow :