Recent Post dengan Image Thumbnails

blog, tricks, tips, tutorial, free, download, blog templates, trik, stop dreaming start action 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..

4 comments:

  1. woooeeee,,,,tip keren kang,....wah bisa nyoba ni kang....hehehe....tapi nanti ni kl udah bisa full OL kang...maklum masih numpang di warnet ni.....

    ReplyDelete
  2. maksi mas....tapi klo kita mau semua recent post nya selalu menampilkan gambar dan postingan terbaru dari kita gmn caranya...langsung ke email saya webbigest@gmail.com ea ato ga kirim komen ke www.webbigest.com

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz