Cara Pasang Recent Posts Slider (Tutorial)

Salam....

Dah lama aku tak update blog sehingga ditegur oleh top blogger sebab dah bersawang teratak ini tanpa entry baru. Biasa la, sindrome malas menyerang dan game farmville telah merantai tangan dan jiwaku dari menaip entry.

Okey, hari ni aku nk buat tutorial yang di minta oleh purpleroses. Matdin pun pernah tanya juga dulu tapi belum sempat aku bagitau, beliau dah siap buat. Cepat sungguh. Tutorial ini dipelajari dari cikgu Nescafe Ais. Ada sesiapa yang tak kenal? Kredit untuk cikgu Nescafe.

Recent Posts Slider seperti di bawah atau boleh dilihat di sidebar blog yang sedang bergerak-gerak tu (Sajian Teratak).

Caranya senang sahaja. Copy je code di bawah ni, edit apa yang patut dan paste pada HTML/Javascript.

<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>

Save!

Jadi, pandai-pandailah edit url blog, 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)

Selamat mencuba dan jangan lupa tinggalkan komen anda. Terima kasih.

Ranking: 5

JOM BACA LAGI