13 December 2010

tutorial : Animated Recent Post Widget

hari ni aku rajin lagi nak buat tutorial. kali ni tutorial untuk buat recent post bergerak-gerak atau pun animated lah orang putih kata. sebagai contoh tengok gambar dekat bawah ni. cun kan? cakap cun sekarang~! huhu :DD aku tau ramai yang dah tau pun tutorial ni. saja nak kasi tau untuk siapa-siapa yang tak tau je :)















cara-caranya :

1. Dari dashboard > design > add a gadget > HTML/javascript
2. copy code dibawah dan paste di ruangan HTML/javascript
Note: gantikan URL BLOG dengan url blog anda..
3. Save.



<center><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 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://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.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 = 10;
home_page = "http://
URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>



p/s : tak semua template blog boleh pakai code ni, tapi kebanyakannya boleh guna. try lah ek. daa

6 orang komen:

Aqilah Azmi said...

Thank You <3

eira said...

@Akeyla Azmey :)ur wc :)

Unknown said...

can I remove the date and the comment?
I just want THUMBNAILS !

eira said...

@Vivienne i dont think so dear :)

eladya said...

dah nak dkt 10 kali dah aku buat,x blh2 pun..knapa nyeh?

eira said...

@eladya kalau server ko pn xok.. internet pun slow jangan nak expect dia boleh kuar la.. sabar la sikit kadang2 system yg xok..ak punye ok je xde mslh.. btw budi bahasa budaya kita ye dik :)

Post a Comment

setiap kata-kata adalah doa..sila betulkan niat anda dan komenlah dengan ikhlas..


best regards,
eira

EXCHANGE LINKS