Animated Recent Post Widget

Update: Bagi sesiapa yang menghadapi masalah background widget ini tunjuk 'bandwidth exceed", boleh copy semula kod dibawah, dan masukkan semula url anda..

Kesulitan dikesali.


Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

(tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


Berikut adalah cara-cara untuk menggunakan widget ini.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. copy code berikut dan paste di ruangan HTML/javascript

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>


Note: gantikan URL BLOG dengan url blog anda..

3. Save dan lihat hasilnya.

-------------------

PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

Harap blog anda boleh menggunakan widget ini.
Selamat mencuba.:)

307 comments:

  1. Salam singgah sebentar
    blog anda,apa khabar?
    moga sihat dan ceria
    selalu..saya dah gunakan
    di blog saya rasanya..sama
    kan?

    ReplyDelete
  2. thanks saya dah cuba..ilmu yang bgs...

    ReplyDelete
  3. tq... saya dah apply kat blog sya.. dan berjaya...

    ReplyDelete
  4. salam,,macam mane kita nk adjust kelajuan recent post nie?? kt perkataann ape mesti di edit??
    tq,,, ^^

    ReplyDelete
  5. bro unwanted...
    apasal dia dah xbrapa gerak..mula2 bergerak huhuhuu
    aku dah try byk kali dah

    ReplyDelete
  6. cool widget,.
    sy punye b0leh..cuma sy tukar size s0 that suitable f0r my blog template.

    thanx.. =p

    http://atieput3.blogspot.com

    ReplyDelete
  7. dah cuba.. n dah copy link sini tp kann.. naper x gerak pon.. x reti la aimaniman nie

    ReplyDelete
  8. Dah cuba.. mula2 dapat.. tapi dah tak dapat.. nape yerk?

    ReplyDelete
  9. wahh cool!! thanks for the tutorial/info.
    ;)

    ReplyDelete
  10. thanks for this tutorial . anda sangat baik berkongsi ilmu :)

    ReplyDelete
  11. terima kasih...tutorial ini byk mberi pgetahuan baru pd sya.

    ReplyDelete
  12. he he.. dapat dah mama iamniman..

    ReplyDelete
  13. Terima kasih kerana berkongsi.. Nanti nak cuba dalam blog sendiri.

    ReplyDelete
  14. nk tanye.. mcm mane nk panjangkan dia ye?

    ReplyDelete
  15. apakah kita boleh buang arkib lama kita...sebab saya mahu mengecilkan ruang.Dan bagaimana untuk buat widget bagi menyimpan award.?

    ReplyDelete
  16. ada siapa2 x yang dapat tukar widget ni dari static kepada animated, really need help.

    ReplyDelete
  17. td jd je..tp ble bkk lg 1x da ta kluar da...cmne ni?

    ReplyDelete
  18. kenapa bila comel buat gambar tuk blog tu xda kuar pun huhu please help

    ReplyDelete
  19. awk..nape saye wat byk kali p bende 2 ttp tak bergerak..jus static g2 je??argh...gramnye...
    please bls kat shoutbox sy..

    ReplyDelete
  20. thengss , da try kat blog .
    behasil wehh ! huu :))

    ReplyDelete
  21. kuar tapi pas beberapa hari ader plak cam perkataan yang yang berdouble kat situ
    nape eyh ?

    ReplyDelete
  22. aah sama wiwie s.

    nk tnye yg tu jgak.. nape kluar bandwidth exceeded tu?

    ReplyDelete
  23. sama gak!!... dulu keluar ok jer.. sekarang macam ada keluar perkataaan suruh update.. line biru?? kenapa??

    ReplyDelete
  24. wiwie s, Ayu Saidi, FARIZ RAZALI

    sory coz masalah ini.
    Sudah dibetulkan.
    Boleh copy semula kod di atas..:)

    ReplyDelete
  25. liz dah guna widget ini...tapi liz nak tanya gimana ubah warna backgroundnya ya puteh kewarna lain ya? tolong shout at my blog..tq

    ReplyDelete
  26. yeay dah buat ! jadi la ;) thanks ! :D

    ReplyDelete
  27. Assalam..cantik saya sangat suka tq banyak2 ya bro..

    ReplyDelete
  28. widget tak bergerak pun :( mcm mane ? dah try coding dari blogger laen pun tak boleh..boleh tolg tak ? mane tw ade kslpn coding dimane2.. :(

    ReplyDelete
  29. salam , saya nak share ni nak letak untuk tutorial kat blog saya yek ? thanks :)

    ReplyDelete
  30. salam bro, terlalu laju la bro, mcm mne nak slow kn ckit kelajuan dia sbb gerak agak laju..

    ReplyDelete
  31. cara nk letak fb like button ade x?
    camne nk wat eyh?
    leh aja?

    ReplyDelete
  32. nape image x appear kt tepi tu eh? ='(

    ReplyDelete
  33. de sesape xyg leh tlg bg idea cmne nk lebar kan saiz kotak nye??xreti la...huhuhu

    ReplyDelete
  34. waaa.......da xbOlEh.

    ReplyDelete
  35. knp saya pnyer xkua gmbar??

    ReplyDelete
  36. saya nyer tokleh la... huhuhuh...

    ReplyDelete
  37. thanks!!!...kepada yang x boleh tu....sila lah lihat yang tukarkan dri URL blog kepada alamat blog anda??...okay..selamat mencuba

    http://akmallrazlan.blogspot.com

    ReplyDelete
  38. SAYA NYER PON X KUAR GAMBAR....NEED HELPS

    ReplyDelete
  39. TIMA KASIH FOR Animated Recent Post Widget

    ReplyDelete
  40. nk tkar colour backgroud tkar kt mne...
    tkn ctrl+f lps 2

    ReplyDelete
  41. salam..nape sy punye dia tak bergerak..statik jek...need help pls...

    ReplyDelete
  42. Salam.. terima kasih banyak2 saye ucapkan sbb blog anda byk membantu saya yang baru dalam dunia blogger. Arahan yg mudah utk difahami. Tq.

    ReplyDelete
  43. salam ...tkasih..widget yg menarik..tahniah!

    ReplyDelete
  44. Terima kasih atas widget ni..saya ambik tau.

    ReplyDelete
  45. thanks you veru much.... very benificial.... i like it...

    ReplyDelete
  46. nak tanye laa...apsal org x bley search blog sy via google ekk>> even g option tuk blog pon masih x dpat jugak...sy dh cek setting,ok gak viewable 4 everyone...huhu help me??

    ReplyDelete
  47. Thanks ! i Like it :)

    ReplyDelete
  48. mcm mne nak bagi kuar tittle ?

    ReplyDelete
  49. Alhamdulilah..banyak sungguh ilmu yg tiada dlm buku yg boleh kita berkongsi bersama..terima kasih saudara..

    ReplyDelete
  50. asSalam, nak tanya macam mana kalau nak panjangkan atau pendekkan width supaya fix 100% dengan sidebar or mainbar blog kita?

    Sebab bila letak widget nie kat sidebar blog saya, xmuat...bila pindah ke mainbar pula, agak pendek n still ada infomation xkeluar seperti tarikh entri, harap dapat membantu...^_^...

    ReplyDelete
  51. yeah.. berjaya..
    terima kasih naaa..

    ReplyDelete
  52. As salam. Sedih+duka sugguh hati ini kerana xdpt masuk widget tuh...tp xpew la,ape2 hal pn widget anda mmg mnarik!!

    ReplyDelete
  53. salam...cm ne nk paste kod 2 ye???paste kat bahagian mne kt html 2???

    ReplyDelete
  54. ye la.. aku punye blog xbleh guna.. sedihnye

    ReplyDelete
  55. thanks for the tips .. i've applied to my blog .. thanks again .. :) visits la my blog .. :) http://datsyati.blogspot.com/

    ReplyDelete
  56. nak cuba buat, kalau jadi...nak share tutorial ini di blog saya...t.kasih

    ReplyDelete
  57. Thanks.. sy berjaya buat.. tapi sy ada tukar width supaya bersesuaian dgn blog sy.. boleh kan? hehe.. btw thanks sekali lg.. :)

    ReplyDelete
  58. Alhamdullilah dah berjaya..tq dear :)

    ReplyDelete
  59. thanks...zana dah ltk widget nie kat blog pun

    ReplyDelete
  60. tq... minta izin ilmu, dah letak di blog

    ReplyDelete
  61. hai unwanted kenapa kita tak boleh adaptasikan widget ini di blog kite. Saya dah follow semua arahan tapi tak berjaya. Dan satu lagi kite dah letak banner unwanted di bahagian banner exchange..tq

    ReplyDelete
  62. yeay!!!...
    tq..da letak kt blog..^_^

    ReplyDelete
  63. kali pertama aku jumpa author yg open minded dan sporting mcm ni..thanks dude..

    ReplyDelete
  64. berfungsi dengan baik... thanks :)

    ReplyDelete
  65. salam,
    terima kasih bagi tuto ni yer.
    saya dah kopipes & sukses!.
    tq for sharing da great info..

    ReplyDelete
  66. kenape blog sy mende tuh ta bergerak ? kosong sahaja !

    ReplyDelete
  67. Terima kasih, jasamu dikenang...hehe
    saya dah copy & paste, menjadi...TQ untuk info

    ReplyDelete
  68. dah berjaya buat.. terima kasih.. kakyong kongsikan di blog

    ReplyDelete
  69. saya try jugak tapi kosong jek. widget ni untuk blogspot jer ke. dot com tak boleh?

    ReplyDelete
  70. hai.. sy nk tnye... sbenanye..kte kne copy sume yg die suroh kt ats tuh kee.?

    ReplyDelete
  71. @fizanur : sebab kosong tu, awak belum tukar nama blog/url blog awak...

    thanks share tutorial ni...

    ReplyDelete
  72. err assalam. cana na buad like fb tu ya? boleh kongsi cerita? hehe

    ReplyDelete
  73. Tenqiu 4 d tutorial...it helps me lot..(^_^)v

    ReplyDelete
  74. Salam,

    Saya copy jugak.. jom singgah blog sy..
    Tengok menjadi tak? @_@

    ReplyDelete
  75. x jadi pun..
    bila copy paste jer..
    yg len sume x kuar.. :(

    ReplyDelete
  76. bila saya remove balik widget ni..
    baru yg len kuar balik..
    cane ni??
    saya mau sgt2..
    nmpak cantik..

    ReplyDelete
  77. saya punya blog mcm nie...
    http://syairah-merpatiputih.blogspot.com/ saya cuba bt Animated Recent Post Widget tp tk keluar gmbr ... tlg saya.. add saya dlm fb shah_rose84kym@yahoo.com.. ajarla saya

    ReplyDelete
  78. haha sempoi ! lpas paste je apa pun tk kuar . =="

    ReplyDelete
  79. dahh try...alhamdulillah...menjadikkkk...me kaseyy yerkkkk

    ReplyDelete
  80. thanks....

    http://nurhafiza85.blogspot.com

    ReplyDelete
  81. terima kasih...menjadi saya buat...





    http://astoryaboutmeandmylife.blogspot.com/

    ReplyDelete
  82. saya dah wat..bergerak..tp xder gambar pn,, camner tue ?

    ReplyDelete
  83. Masa mula2 buat ok. Tapi dah seminggu ni, dia keluar bertindih2. Dah try copy n paste semula tp serupa jugak... please, tolong tengokkan. Saya amat menghargai pertolongan tuan. T/kasih byk2..

    ReplyDelete
  84. cik nin mintak izin amik. tq ye.. :)

    ReplyDelete
  85. y gamba die jadik halg jekk??cmne nk wat full???

    ReplyDelete
  86. lama dh cari widget ni.. d sini rupanya.. :D thankss

    ReplyDelete
  87. salam. try buat widget ni. tp mule2 bertindih2 , pastu try buat lagy, ta bergerak pulak ? nape ye ? :)

    ReplyDelete
  88. xgerak la xcne ea ?

    ReplyDelete
  89. gmba yg kat sbelah tu , based on kite either kt entri tu kite ltak gmba or tak eh?

    ReplyDelete
  90. dah dpt t.kasih...

    ReplyDelete
  91. kenapa sy pny xkuar gambar ? huhuh

    ReplyDelete
  92. kenapa bella wat shoutmix ta bole , asyik tabole jer . da byk kali bie . haishh , geram , somebody help me !

    ReplyDelete
  93. sayre nak tyer laaa...beraper kelebaran sesuai klu kat side bar?sayer da cuber buat dah kuar tapi kurang elbar..dah banyak kali adjust tak boleh gak..batu bole

    ReplyDelete
  94. Wow...lubuk tutorial, macam2 ada...

    ReplyDelete
  95. menjadi!
    thanks kerana berkongsi ilmu!

    http://lelakitanpaemosi.blogspot.com/

    ReplyDelete
  96. kenapa saya pny x kluar gambar pon :(

    ReplyDelete
  97. nak tnya.. benda ni boleh guna kat tumblr x? ni tumblr i - http://ulzzanglovers.tumblr.com/

    mcm x dpt je.. =.=" ada papa bgtau k
    nak sgt ltk bnda ni kat blog T-T

    ReplyDelete
  98. TQ dh try dan menjadik skalik!!!

    ReplyDelete
  99. wah,,,hebat bangdd blognya,,,,ACUNGIN JEMPOL deh!!!

    Aku pasang bannernya di blog aku, jangan lupa jalan2 ke blog aku, kasih komment juga....dan sangat berharap banget mau follow aku.

    salam sahabat
    http://catatan4you.blogspot.com

    ReplyDelete
  100. salam... nape saya wat dia tak gerak2? ada ayat kena ubah ke kat situ? tolong saya please.. huhu

    ReplyDelete
  101. terima kasih . dah buat . die bergeraklah . suke2 :)

    ReplyDelete
  102. tapikan macamane nak lebarkan dia punye tu erk ? tak nampak lah tulisan dia .
    nampak gambar je

    ReplyDelete
  103. Very interesting....thanks 4 make it very easy to use.

    ReplyDelete
  104. nice... da cuba da kt blog... menjadi... heee~
    thankz again....

    ReplyDelete
  105. Info yang baik..
    kredit untuk anda!keep it up :)

    ReplyDelete
  106. saye pnye x leh buat lah..knape ek???

    ReplyDelete
  107. klau ada blog yg x bleh tu cube pegi kat --- >
    DESIGN > SETTING > POST FEEDS > tukar jadi FULL ... n tgk hasilnya ...:) harap2 jadi ,,, sy cuba kat blog sy da jadiii =D hehehe

    ReplyDelete
  108. JOIN BLOG sayaaaaaaaaaaaaaaaaaaaaaa :DDDDDDD

    ReplyDelete
  109. Nice http://freewidget4u.blogspot.com

    ReplyDelete
  110. bagus nih, tapi kok cepat banget geraknya.

    salam dari indonesia

    ReplyDelete
  111. thanks ..
    syukur leh sampai sini....
    leh ambik ye...
    thanks

    ReplyDelete
  112. this best bro!! already use this...like!! thnks a lot..=)

    ReplyDelete
  113. thanks,smua tutorial ni da saya ikut..
    smuanya menjadi..thanks sgat

    ReplyDelete
  114. saya punya x boleh lah.. kenapa sya punya x boleh.. ermm tolong lah.. saya...

    ReplyDelete
  115. Alhamdulilah....trima kasih...sgt2 membantu

    ReplyDelete
  116. aku punye x kuar gambar pun... dah tukar dah url die

    ReplyDelete
  117. cume kat blogspot je ke boleh?klau gne wordpreesss kanpe x boleh>?

    ReplyDelete
  118. sukanye sukanye.. 1st wat x kuar pic rupenye x ltk url.. teruja sungguh dibuatnye.. maklumlah, kak yong baru blaja wat blog.. tqvm tuan empunye blog ni..

    ReplyDelete
  119. saya pun dah buat ini di blog saya!!^^

    ReplyDelete
  120. huhu mcm ade je yg x kene ngan blog sy...sy blogger baru... tp sy x tau pe yg x kene ngan blog sy... follow sy n komen la pe yg ptt.

    ReplyDelete