Memasang Recent posts slider pada blog

Recent posts slider seperti yang boleh anda lihat pada blog ini (Entri Terkini) sememangnya widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnil (image) secara rotation.

Untuk memasang widget recent post slider ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1


Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1). Sila edit kod yang di bold mengikut kesesuaian blog anda.

width:280px;  (lebar kotak)
width:262px;  (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)


<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:280px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:262px;
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://Masukkan URL blog anda disini.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>

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.
Memasang Recent posts slider pada blog

ini sgt menarik..baru je nak tanya...dah ada tutor...terbaik dr ladang ni

terbaik..dari ladang.mbeeek..hehe

dah try buat tp xjadi laa...dah edit ikut kesesuaian blog...

ok dah jadi skang...tp bertambah berat plak aku rasa blog aku ni...tp xpa ar best gak benda ni...hahaha...thanks

bro , yang atas tu silap lh,
yg 262 tu lebar kotak, 280 tu utk word.
btw, thanks :)

@keret

Hehe. Terima kasih sebab bagitau.

Jangan ikut angka yang tu. Tu kod dari blog ni. Jadi kena adjust ikut lebar sidebar blog sendiri. Tak caye, cuba adjust. Kalau tak adjust tajuk post duduk atas image.

tidak menjadi seperti di sini

@Legasi Piston Pecah

Bagaimana gerangan yang tak jadinya. Ker, widget tak keluar. Kalau tak keluar, sila cuba sekali lagi, dan lagi. Mesti jadi.Sebab keret buat, jadi. Hehe

caya lah blog ni....tak sia-sia...
sharing is caring..hehehe

terima kasih..aku dah cuba dan berjaya..

best2...thank you tuan rumah...sgt2 menarik :D

menarik jugak..dh try pun..tp dia x rotate pun,statik je..ade penyelesaian x nes?

@Mi vida

Mesti ada silap sikit kut. Cua copy semula kod tu, cuma edit part masukkan URL.Yang lain nanti dulu. Lepas tu tengok, rotate ker tak.

dah wat..edit url je..x rotate jugak..

@Mi vida

Mm..Tak pasti apa maslahnya. Gua pun guna javascript yang sama, tapi ok. Cuba buat satu test blog. Lepas tu masukkan widgetnya pada test blog. Tengok, rotate ker tak.

oo..ok bro..dh wat kt test blog, boleh lak rotate..erm,rasanya x sesuai kot ngan blog ana yg ni..kempunan den..adoiii

Aku dah buat tp cara tak tak bg ke kanan sikit.ada teks sikit atas gambar.ada

THANKS A LOT, blog awak ni banyak membantu saya...

cayalah bro!!!


sukerrrrrrrrrrrrr sangattttttttttttt!!!!

XBOLEH PON. YG BIRU2 KAT BAWAH TU APA PULAK?

dah buat tp no image walaupun ada image utk entri tu?

Salam Tuan,
kalau wordpress bagaimana tuan?

thanx.. blog saya jadi kemas.. dan saya sgt suke sbb info from ur blog.. cheers~

dah wat dah tapi npe dia xde img ek?? even entry tu de img.. sy cuba try wat old array kat img tu tapi tak mnjadi plak.. de kah dia kena wat entry trbaru dulu baru kuar gmbar??

neslo, apsal image xkuar ni???
konpius ahhh..huhu

tolong!!!!

Aku nak tukar background di ikut color blog/ transparent, apa kod nya ek?

ada tex la kt gbr tu..cmne nk wt tex tu xkne kt gbe ek? :(

tq ..aku suka cara ni..aku dah buat tengok dalam http://myvitrd.blogspot.com

salam..trima ksih utk tutorial nie.mmg jdi, tpi gmbr thumbnailnye kna paste blik ke link dri post kite? die xble auto picture dari post eh

Anonymous
delete

kenapa tak boleh tunjuk postdate dan comment?

Nescafe ais
delete

@Anonymous

Edit font size pada .spydate{ dengan .spycomment{

Contoh:

.spydate{
overflow:hidden;
font-size:10px;
color:#000;
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:10px;
color:#000;
padding:0px 0px;
margin:0px 0px;
}

Lagi satu, edit pada

showPostDate = false;

showcomments = false;

Tukar false kepada true

Anonymous
delete

@Nescafe ais

berjaya...terima kasih :)

wah!! dah lama cari.. baru jmpe.. hihihi...

Anonymous
delete

vdsqzkyzkfqutuvwjvwr, http://yahooscanner.net Yahoo scanner, fUjoWnk.

berjaya...thanks... i like...