Recent Post dengan Image Thumbnails

Kita sudah pernah membahas tentang bagaimana cara membuat recent post dan cara membuat recent post berdasarkan label.

Trik kali ini, akan membahas tentang cara membuat recent post dengan image thumbnails atau recent post disertai gambar.

Sebagai contoh, pada sidebar blog Ayas 'Free Blog Templates'. Itu adalah contoh recent post yang disertai dengan gambar.

Bagaimana cara membuat recent post dengan thumbnails/gambar?

Yuk kita bahas bareng..

Mudah kok caranya.

Buka pada halaman 'Layout' - 'Page Element' kemudian klik 'Add a Gadget' ditempat sodara mau tambahkan recent post dengan gambar ini. Kemudian pilih saja 'HTML/Javascript'

Copy paste code berikut :

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i40.tinypic.com/14wbofa.png";

imgr[1] = "http://i43.tinypic.com/15qb13c.jpg";

imgr[2] = "http://i42.tinypic.com/2ztcydd.png";

imgr[3] = "http://i44.tinypic.com/2ljol87.png";

imgr[4] = "http://i39.tinypic.com/2cdj3gx.jpg";
showRandomImg = true;

tablewidth = 230;

cellspacing = 3;

borderColor = "#f2f2f2";

bgTD = "#f2f2f2";

imgwidth = 80;

imgheight = 80;

fntsize = 12;

acolor = "#666";

ccolor = "#5588aa";

cFontsize = 10;

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;



summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 3;

home_page = "http://www.forfreebloggertemplates.com/";

</script>

<script src="http://mezzaluna08.bravehost.com/recentpostwithimage.txt" type="text/javascript"></script>

Kemudian simpan, jadi deh.

Sodara bisa mengganti kode diatas :

imgr[0]

Contoh diatas, terdapat 5 kode gambar. Gambar tersebut adalah gambar2 yang akan muncul secara acak jika pada postingan Sodara tidak ada gambar.

showRandomImg = true; ---->Isi dengan true jika Sodara menginginkan gambar akan tampil secara acak. Jika tidak, isi saja dengan false.

tablewidth = 230; ----> lebar keseluruhan.

cellspacing = 3; ----> Jarak antar kotak.

borderColor = "#f2f2f2"; ----> warna garis tepi.

bgTD = "#f2f2f2"; ----> warna background.

imgwidth = 80; ----> lebar gambar / thumbnails

imgheight = 80; ----> tinggi gambar / thumbnails

fntsize = 12; ----> ukuran huruf untuk judul

acolor = "#666"; ----> warna huruf untuk judul

ccolor = "#5588aa"; ----> warna huruf untuk comments

cFontsize = 10; ----> ukuran huruf untuk comments

aBold = true; ----> True jika judul tampil dengan huruf tebal

text = "comments"; ----> Silahkan ganti tulisan 'comments'

showPostDate = false; ---> true jika Sodara ingin menampilkan tanggal

summaryPost = 50; ----> banyaknya karakter pada Post summary

summaryFontsize = 10; ----> ukuran huruf untuk post summary

summaryColor = "#666"; ----> warna huruf untuk post summary

numposts = 3; ----> jumlah postingan yang akan tampil

home_page = ""; ----> silahkan ganti dengan alamat blog sodara

Selamat berkreasi membuat recent post dengan gambar..