Tutorial recent post bergerak

Saturday, August 14, 2010

Nampak menarik kalau buat recent post bergerak (animation) pada sidebar tu. Bagi yang suka ada recent post bergerak dalam blog, boleh cuba tutorial recent post bergerak.

Tutorial recent post bergerak

Log in blogger >> dashboard >> layout >> add a gadget >> html 
Copy kod kat  bawah ni (klik sini untuk copy kod) and paste dalam kotak gadget html

Font warna merah tukar url blog sendiri.
<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:hidden;
margin-top:5px;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:200px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:center;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#A32929;
font-size:12px;
height:0px;
overflow:hidden;
margin: 0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:10px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:0px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "url blog";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>

Kemudian jangan lupa save! 

18 comments

  1. thanx akk ku syg...hu3
    nak muaahhhh...hehe

    ReplyDelete
  2. ehmm...url tu yg mana ea??huhu....saya try wat jugak, tp xjadi lagi

    ReplyDelete
  3. dah jadi.....heee..suka sgt...thanks 4 sharing =D

    ReplyDelete
  4. nape sue wt xleyh ae? xjd la.. url yg mne? hhuuhu.

    ReplyDelete
  5. thankiess foe d tuto..
    darhh lma mncrii,fnally dpat jugakk...
    comel blog.. !!

    ReplyDelete
  6. akak, cane nak wat border dalam post entry kite ?
    jawab la kalau tak menyusahkan. hehe

    ReplyDelete
  7. nisa punye x jadi pun. blank je :(

    ReplyDelete
  8. salam akak..knp sy uat x leh ea..url 2 yg mana 1???

    ReplyDelete
  9. xjadi lar.. sobs... sobs...
    dah letak url sendiri.. da refresh... still xdapat.. help admin !!

    ReplyDelete
  10. dulu ada widget ni tapi dah buang sebab mcm agak berat

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata maki hamun, soalan yang jawapannya terang lagi bersuluh ada dalam entri, atau tidak menyenangkan tidak akan disiarkan. Begitu juga dengan unknown profile. Harap Maklum.

Sekian Terima kasih.