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.:)

308 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. singgh ambik ilmu..thenks...

    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. kenapa keluar bandwidth exeeded eh?

    ReplyDelete
  23. aah sama wiwie s.

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

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

    ReplyDelete
  25. wiwie s, Ayu Saidi, FARIZ RAZALI

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

    ReplyDelete
  26. 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
  27. yeay dah buat ! jadi la ;) thanks ! :D

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

    ReplyDelete
  29. 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
  30. salam , saya nak share ni nak letak untuk tutorial kat blog saya yek ? thanks :)

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

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

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

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

    ReplyDelete
  35. waaa.......da xbOlEh.

    ReplyDelete
  36. knp saya pnyer xkua gmbar??

    ReplyDelete
  37. saya nyer tokleh la... huhuhuh...

    ReplyDelete
  38. 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
  39. SAYA NYER PON X KUAR GAMBAR....NEED HELPS

    ReplyDelete
  40. TIMA KASIH FOR Animated Recent Post Widget

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

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

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

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

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

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

    ReplyDelete
  47. 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
  48. Alhamdulilah..banyak sungguh ilmu yg tiada dlm buku yg boleh kita berkongsi bersama..terima kasih saudara..

    ReplyDelete
  49. 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
  50. As salam. Sedih+duka sugguh hati ini kerana xdpt masuk widget tuh...tp xpew la,ape2 hal pn widget anda mmg mnarik!!

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

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

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

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

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

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

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

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

    ReplyDelete
  59. 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
  60. yeay!!!...
    tq..da letak kt blog..^_^

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

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

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

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

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

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

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

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

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

    thanks share tutorial ni...

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

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

    ReplyDelete
  72. Salam,

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

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

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

    ReplyDelete
  75. 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
  76. haha sempoi ! lpas paste je apa pun tk kuar . =="

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

    ReplyDelete
  78. thanks....

    http://nurhafiza85.blogspot.com

    ReplyDelete
  79. terima kasih...menjadi saya buat...





    http://astoryaboutmeandmylife.blogspot.com/

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

    ReplyDelete
  81. 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
  82. cik nin mintak izin amik. tq ye.. :)

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

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

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

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

    ReplyDelete
  87. kenapa sy pny xkuar gambar ? huhuh

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

    ReplyDelete
  89. 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
  90. Wow...lubuk tutorial, macam2 ada...

    ReplyDelete
  91. menjadi!
    thanks kerana berkongsi ilmu!

    http://lelakitanpaemosi.blogspot.com/

    ReplyDelete
  92. kenapa tak animated? hadoih

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

    ReplyDelete
  94. 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
  95. TQ dh try dan menjadik skalik!!!

    ReplyDelete
  96. 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
  97. salam... nape saya wat dia tak gerak2? ada ayat kena ubah ke kat situ? tolong saya please.. huhu

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

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

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

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

    ReplyDelete
  102. knape sya punye x de gmbo???

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

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

    ReplyDelete
  105. 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
  106. JOIN BLOG sayaaaaaaaaaaaaaaaaaaaaaa :DDDDDDD

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

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

    salam dari indonesia

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

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

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

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

    ReplyDelete
  113. Alhamdulilah....trima kasih...sgt2 membantu

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

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

    ReplyDelete
  116. 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
  117. saya pun dah buat ini di blog saya!!^^

    ReplyDelete
  118. 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