Tutorial Recent Post Bergerak

Hari tu, saya dah share bagaimana nak letak Facebook Like & Retweet button, kali ni saya nak kongsikan pulak bagaimana mahu membuat recent post bergerak seperti kat fresh entries di sidebar tu..

Macam biasa, pi kat Dashboard > Design > Page Elements > Add a Gadget.. Then pilih HTML/ JavaScript. Pehtu, hangpa copy code ni dan paste kat bahagian content..

<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://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 = " ";         showPostDate = false;         showcomments = false;         summaryPost = 40;         summaryFontsize = 10;         summaryColor = "#666";         icon2 = " ";         numposts = 20;         home_page = "http://URL BLOG ANDA/";         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>

Part yang kaler merah tu, tukar ngan alamat blog uols. Yang kaler hijau tu pulak, uols leh tukar mengikut saiz dan kesesuaian sidebar blog uols. Yang kaler biru tu, numposts = 20 adalah jumlah post yang akan dipapar secara bergilir-gilir.. Yang limitspy = 4 tu pulak adalah jumlah paparan post pada masa yang sama..

Dah adjust comey-comey, preview pon dah berkenan di hati, maka uols leh save dan voila!! ^_*


p/s : credit to Riwayat Hariku