Recent Post dengan Thumbnail Widget

Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

Contoh adalah seperti gambar ini.


Cara-cara untuk meletakkan widget ini adalah seperti berikut:

1. Dari dashoard > desin > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod berikut.
<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://URL ANDA.blogspot.com/";

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpostthumnail.js" type="text/javascript"></script>



Note:

Anda boleh ubah beberapa kod mengikut kesesuaian blog anda.

boxwidth - lebar widget
cellspacing - jarak antara cell (default sudah ok)
borderColor - Warna background (untuk melihat senarai kod warna, RUJUK SINI)
thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
fntsize - Size untuk tajuk
acolor - Warna tajuk.untuk melihat senarai kod warna, RUJUK SINI)
aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
numposts - Bilangan recent post yang dikehendak
home_page : http://URL ANDA.blogspot.com/ (Gantikal URL ANDA dengan url blog anda)


3. Save dan lihat hasilnya.:)

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

-Bagi yang buat tetapi tidak menjadi, dari dashboard > settings > site feed
- Pada allow site feeds, pilih FULL

43 comments:

  1. salam..
    saya dah lama gunakan
    tutor dari nescaffe ais
    terima kasih panjangkan
    ilmu berguna ini..

    ReplyDelete
  2. salam,
    boleh tak buat tutorial nak masukkan background kat kotak komen mcm blog ni..
    tq

    ReplyDelete
  3. salam.nk tanya disini,saya ade guna yg animated recent post tu,tp after a week dah jadi mcm corrputed pe ntah dia ckp bandwidth exceeded.cmne eh?tq :)

    ReplyDelete
  4. wah, makasih udah ada tutorialnya :)

    ReplyDelete
  5. dh 10juta kali bt tp xlh (nie gua nk pns nie)

    ReplyDelete
  6. yeay dah buat ! jadila ;) thanks ! :D

    ReplyDelete
  7. saya dah try yang ni.. jadi tu jadi, tapi kenapa xkeluar gambar yer?? yang keluar semya tinypic.com exactly like in the code.. how to solve this?? TQ in advance..

    ReplyDelete
  8. ok done!! saya explore and change the url of the pic. sorry for any inconvenient..

    ReplyDelete
  9. salam..nak tanya sikit ni..saya dah try buat tapi kenapa ''Recent Post'' title yang saya letakkan berpisah dgn box yang mengandungi recent-recent post saya?

    ReplyDelete
  10. ramai yg buat jadi..ramai juga yang tak jadik eh?
    tak silap tuto ni tuk mereka yg guna Mozilla je kan..yg guna IE atau Chrome, mmg kekadang tak menjadi..sbnrnye bkn tak menjadi,tp takdapat lihat hasilnye..
    (betulkan jika Elle tsilap)

    ReplyDelete
  11. INGIN TINGKATKAN TRAFFIC BLOG ANDA?
    SERTAI KAMI DI MALAYSIAN BLOGGERS COMMUNITY
    PING BLOG ANDA SECARA PERCUMA DISINI.

    CLICK HERE TO JOIN"MALAYSIAN BLOGGERS COMMUNITY"

    ReplyDelete
  12. mcm mana nk copy html tu ?
    nak ambil kt mna?
    boleh tlg ajr ?

    ReplyDelete
  13. Hope unwanted boleh bantu..
    sy dah buat tapi image tak kluar..
    dia tulis no image available..
    mcmane ye nak timbulkn gmbar..
    tutorial ni kemas sgt.. tpi kalu takde gmbar mcm tak sempurna...

    http://kukongsilamanku.blogspot.com/

    ReplyDelete
  14. thanks awak kongsikan tutor ini

    ReplyDelete
  15. nk tnya, kalau nk ubh header kita bg cantik skit cm ne ek ?

    ReplyDelete
  16. Thank tutorialnya..sudah sukses saya terapkan di blog saya!

    ReplyDelete
  17. boleh terangkn pd sy bagaimana nk buat comment box pada setiap post yg kita buat....

    ReplyDelete
  18. setting->comment-> Comment Form Placement->click Embedded below post . tu jer untuk set setiap post ade komen.sj nk tlg admin jwb. ;)

    ReplyDelete
  19. salam....saya bru je buat blog..sayank tny npe jarak gambar ke gambar post jauh ea..boleh bantu sya?

    ReplyDelete
  20. tq tuan tanah sudi share ilmu

    ReplyDelete
  21. sy suka versi bhsa mlyu. .
    best. .
    tp, sy tak tau nk mletakkn pd blog sy
    :(

    ReplyDelete
  22. knp saya buat xjadi,,,
    yg header dia gelap,,, kno yer??

    ReplyDelete
  23. salam, terima kasih pada admin blog ini, banyak berguna dan baik hati

    ReplyDelete
  24. Salam kunjungan kepada semua ...
    n selamat maju jaya kepada blogger Malaysia..

    IKLAN JAWATAN KOSONG TERKINI DI MALAYSIA

    ReplyDelete
  25. salam,sh byk kali cuba kenapa xkeluar pon?tajuk atas je yang ada..tolong

    ReplyDelete
  26. Tq bro , memang terbaik tuto dari ko

    ReplyDelete
  27. kalau nak letak recent post tapi hanya tajuk camne ye? boleh ajar x?

    ReplyDelete