Tutorial : Cara buat Recent Post dengan Thumbnail

Recent Post biasanya akan senaraikan post2 terbaru kita. Antara kegunaan meletakkan  widget recent post ini ialah bagi memberitahu pengunjung blog kita tentang post baru yang kita dah tulis. Widget ini juga berguna pada blog yang tak menggunakan blog archieve untuk menjimatkan ruang blog. Contoh recent post yang biasa digunakan adalah seperti gambar di sebelah.

Walaupun dalam blogger ada disediakan widget untuk recent post, tetapi design adalah terhad so rasanya tutorial kali ni mungkin korang dapat buat pilihan nak widget yang macammana.

Tutorial kali ni saya nak tunjukkan cara buat recent post berikut. Jom kita terjah terus cara-caranya. Jangan buang masa k.


1. Pergi ke Design>Page Element>Add Gadget Pilih HTML/Javascript

2. Masukkan code di bawah di dalam ruangan content

<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 = 190;

cellspacing = 8;

borderColor = "#660000";

bgTD = "#006633";

thumbwidth = 10;

thumbheight = 10;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#CCFF33";

icon2 = " ";

numposts = 6;

home_page = "http://easy-xs.blogspot.com/";

</script>

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

Sila tukar http://www.easy-xs.blogspot.com/ kepada URL blog anda dan pastikan URL Blog tersebut diakhiri dengan / Sekiranya tidak .. widget ini tidak akan berfungsi. Berikut adalah keterangan mengenai fungsi code diatas;

imgr[0] = Tumbnail post tersebut.
boxwidth = Lebar widget
cellspacing = Jarak antara gambar
borderColor = Warna border (sila ganti dengan warna background template anda)
thumbwidth & thumbheight = Tinggi dan lebar gambar
fntsize = Ukuran text
acolor = Warna text
aBold = Bold text, "true" = bold atau "false" = tidak
numposts = Jumlah post yang ingin anda paparkan

3. Preview dan Save sekiranya tiada error. Selamat  mencuba!