Cara Membuat Slider Recent Post Pada Sidebar

Kalau korang perhatikan pada sidebar sebelah kiri, korang akan nampak satu widget yang bertajuk "Recent Post" yang bergerak-gerak kan? Hari ni saya nak buat satu lagi nota untuk diri saya sendiri dan ingin kongsikan kepada sesiapa sahaja yang sudi lawat blog ni bagaimana cara-cara untuk buat widget seperti ni..

Cara-caranya ialah:


1. Masuk kat dashboard>design>add gadget>HTML/java script

2. copy script kat bawah ni dan masukkan pada ruangan 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:270px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:252px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
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:5px;
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 korang.blogspot.com/";

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>


3. Edit spylist ul(lebar kotak) dan spylist il(lebar tulisan) mengikut kesesuian korang sendiri

4. Korang boleh tukar saiz gambar mengikut kesukaan korang sendiri dengan mengubah nilai thumbwidth dan thumbheight mengikut kesukaan korang sendiri..

Setakat itu sahaja untuk nota hari ini hehehe... Kepada sesiapa yang berminat boleh buat latihan ye hehehe...