Cara Pasang Recent Posts Slider (Tutorial)

Hari ni nak kongsi kepada pengguna blog bagaimana cara menampilkan Recent Post dalam tampilan yang menarik iaitu dalam bentuk Slide Show.Bagaimana cara memasang Ke blogspot Anda?

1)Login Ke blogspot Anda
2)Pergi ke Design,Page Elements
3) Add a Gadget,HTML/JavaScript
4) Copy And Paste Code Berikut
<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:180px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:140px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#DCD8D2;
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:#663300;
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://azilas.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><a href="http://hadlan1987.blogspot.com/2008/09/cara-pasang-recent-posts-slider.html"/><span style="font-size: 80%">Grab this</span></a>

5) Save..
Silalah edit/ubah  url blog (home_page = "http://hadlan1987.blogspot.com/";) Kepada Url Blogspot anda. Edit  Juga warna background, kepanjangan, ketinggian dan paparan yang dikehendahi mengikut kesesuaian blog anda.

Sebagai rujukan:

width:280px; (lebar kotak)
width:300px; (lebar teks pada kotak)
background:#FFFFFF; ( background kotak)
color:#A32929; (Warna teks)
numposts = 20; (Bilangan tajuk post yang ingin dipaparkan)
home_page = "http://Masukkan URL blog anda disini.blogspot.com/"; ( URL blog anda)


Selesai... Credit To Marhalah pertama (Jangan lupa Follow Blogspot Ini)