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


Suka entri ini.?

40 comments:

zulkbo on August 29, 2010 at 8:26 PM said...

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

allyza abdullah on August 30, 2010 at 12:22 AM said...

amik yang ni. nah cokelat sposen

syira qahira on August 30, 2010 at 9:26 PM said...

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

Afiqemran on September 6, 2010 at 4:28 AM said...

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

Muhammad Taqi on September 17, 2010 at 3:24 PM said...

wah, makasih udah ada tutorialnya :)

zaL_cdpx on October 16, 2010 at 12:26 AM said...

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

syaza kelyza on December 11, 2010 at 8:49 PM said...

yeay dah buat ! jadila ;) thanks ! :D

aqish on December 23, 2010 at 12:51 PM said...

thanks sa!!!

lynn angel on December 23, 2010 at 3:16 PM said...

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

lynn angel on December 23, 2010 at 3:27 PM said...

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

AimzWorld on December 27, 2010 at 1:07 PM said...

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?

[ibuLUNAZAHRA] on February 3, 2011 at 5:43 PM said...

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)

aqu slumbers on February 11, 2011 at 6:51 PM said...

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

CLICK HERE TO JOIN"MALAYSIAN BLOGGERS COMMUNITY"

fAtyhAh on March 12, 2011 at 10:36 AM said...

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

Fakhri Norman on March 22, 2011 at 2:49 PM said...

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/

Fakhri Norman on March 22, 2011 at 2:54 PM said...

Da boleh dah... thanks alot...

workshop girl on April 10, 2011 at 1:32 AM said...

x jadi pun :(

Rinah on April 14, 2011 at 11:05 AM said...

Pengguna tutorial ini :)

shera on April 17, 2011 at 4:08 PM said...

x bole pown?hmm

ekin mahmud on May 6, 2011 at 12:17 PM said...

thanks awak kongsikan tutor ini

Tasha on May 18, 2011 at 2:22 PM said...

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

kutu software on June 11, 2011 at 1:01 AM said...

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

lyn at home on June 14, 2011 at 3:28 PM said...

hush! akhirnya berjayaa..tq

zOuL on September 15, 2011 at 3:02 AM said...

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

dyela on September 29, 2011 at 11:53 PM said...

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

JAMU TRADISIONAL on October 6, 2011 at 11:15 AM said...

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

masyari rashid on December 23, 2011 at 2:26 AM said...

bgoss

Oh! Jeng on February 3, 2012 at 3:17 AM said...

Thanks~
Best~ :)

O-rasa on March 7, 2012 at 10:52 PM said...

tq tuan tanah sudi share ilmu

Nini Carlina on March 8, 2012 at 11:50 PM said...

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

LaieLa (eyla) on March 21, 2012 at 7:16 PM said...

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

admin:007dunia on April 2, 2012 at 1:12 PM said...

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

Iklan Jawatan Kosong Terkini on April 9, 2012 at 11:35 PM said...

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

IKLAN JAWATAN KOSONG TERKINI DI MALAYSIA

Norashiqin Kamaruzaman on June 13, 2012 at 5:28 PM said...

DAH menjadi..=) tq ye...

babycomel on July 1, 2012 at 9:27 PM said...

terima kasih..

cek0d0k ceKeLat on November 28, 2012 at 8:11 AM said...

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

Macx Z on November 28, 2012 at 2:01 PM said...

Tq bro , memang terbaik tuto dari ko

Kartika Karim on January 11, 2013 at 11:03 PM said...

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

Fatini Zahid on December 30, 2013 at 11:57 AM said...

saya guna code nie. tq

Anonymous said...

Hey there! This is my 1st comment here so I just wanted to give a
quick shout out and say I really enjoy reading through your
articles. Can you recommend any other blogs/websites/forums that cover the same topics?
Thanks for your time!

Visit my web page spider man unlimited hack tool

Post a Comment

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com Edited by Unwanted