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


{ 35 comments.. read them below or add one }

Armyrule Armyrule 10:58 PM
ini sgt menarik..baru je nak tanya...dah ada tutor...terbaik dr ladang ni
sukiminna sukiminna 11:22 PM
terbaik..dari ladang.mbeeek..hehe
Armyrule Armyrule 11:45 PM
dah try buat tp xjadi laa...dah edit ikut kesesuaian blog...
Armyrule Armyrule 11:49 PM
ok dah jadi skang...tp bertambah berat plak aku rasa blog aku ni...tp xpa ar best gak benda ni...hahaha...thanks
keret keret 1:43 AM
bro , yang atas tu silap lh,
yg 262 tu lebar kotak, 280 tu utk word.
btw, thanks :)
Nescafe ais Nescafe ais 1:57 AM
@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.
Legasi Piston Pecah Legasi Piston Pecah 2:00 AM
tidak menjadi seperti di sini
Nescafe ais Nescafe ais 2:09 AM
@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
SyawaL SyawaL 8:39 AM
caya lah blog ni....tak sia-sia...
sharing is caring..hehehe
Shaifful Hairi b Ramli Shaifful Hairi b Ramli 10:56 AM
terima kasih..aku dah cuba dan berjaya..
Azrul Hisham Azrul Hisham 2:13 PM
best2...thank you tuan rumah...sgt2 menarik :D
Mi vida Mi vida 6:19 PM
menarik jugak..dh try pun..tp dia x rotate pun,statik je..ade penyelesaian x nes?
Nescafe ais Nescafe ais 6:23 PM
@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.
Mi vida Mi vida 7:51 PM
dah wat..edit url je..x rotate jugak..
Nescafe ais Nescafe ais 8:22 PM
@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.
Mi vida Mi vida 8:48 PM
oo..ok bro..dh wat kt test blog, boleh lak rotate..erm,rasanya x sesuai kot ngan blog ana yg ni..kempunan den..adoiii
Iza Iza 9:57 PM
Aku dah buat tp cara tak tak bg ke kanan sikit.ada teks sikit atas gambar.ada
LIZA LIZA 12:55 PM
THANKS A LOT, blog awak ni banyak membantu saya...
DaHLia DaHLia 10:57 AM
cayalah bro!!!


sukerrrrrrrrrrrrr sangattttttttttttt!!!!
Bungakopi Bungakopi 3:43 PM
XBOLEH PON. YG BIRU2 KAT BAWAH TU APA PULAK?
Bungakopi Bungakopi 4:03 PM
dah buat tp no image walaupun ada image utk entri tu?
mohamadzamri mohamadzamri 1:20 PM
Salam Tuan,
kalau wordpress bagaimana tuan?
sYeNgEt ke senget?? sYeNgEt ke senget?? 3:08 PM
thanx.. blog saya jadi kemas.. dan saya sgt suke sbb info from ur blog.. cheers~
Aiza Aiza 9:08 PM
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??
DaHLia DaHLia 8:42 PM
neslo, apsal image xkuar ni???
konpius ahhh..huhu

tolong!!!!
Iza Iza 4:34 PM
Aku nak tukar background di ikut color blog/ transparent, apa kod nya ek?
dakkerek92 dakkerek92 7:45 PM
ada tex la kt gbr tu..cmne nk wt tex tu xkne kt gbe ek? :(
Tn.Punya Tn.Punya 4:34 PM
tq ..aku suka cara ni..aku dah buat tengok dalam http://myvitrd.blogspot.com
Shukor Shukor 2:06 AM
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
AnonymousAnonymous 3:00 PM
kenapa tak boleh tunjuk postdate dan comment?
Nescafe aisNescafe ais 3:36 PM
@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
AnonymousAnonymous 5:06 PM
@Nescafe ais

berjaya...terima kasih :)
suka_haha suka_haha 7:37 PM
wah!! dah lama cari.. baru jmpe.. hihihi...
AnonymousAnonymous 4:29 AM
vdsqzkyzkfqutuvwjvwr, http://yahooscanner.net Yahoo scanner, fUjoWnk.
Jaa Jaa 2:23 PM
berjaya...thanks... i like...