Kamis, 09 Juli 2009

Menampilkan posting terbaru dengan gambar

Sebelumnya saya pernah menuliskan tentang bagaimana cara menampilkan posting terbaru atau recent post. Sekarang saya akan memberikan sebuah tips tentang bagaimana cara menampilkan posting terbaru dengan gambar dan juga jumlah komentarnya. Maksud saya adalah posting terbaru akan tampil lebih menarik karena dilengkapi oleh gambar dan juga jumlah komentar pada posting tersebut.

Untuk melihat contohnya silahkan klik disini. Cukup menarik bukan?, bagaimana cara membuatnya?. Caranya sangat mudah, teman-teman tips blogger cukup mengcopy paste seluruh kode di bawah ini.



Untuk memasang atau menampilkan posting terbaru dengan gambar silahkan ikuti langkah-langkahnya di bawah ini :

1. Login ke account blogger kemudian klik (kustomisasi >> tambah elemen halaman >> pilih javascript/Html).

2. Copy paste kode di bawah ini pada kotak yang keluar.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

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://NamaBlogKamu.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


3. Cacatan untuk kode di atas adalah

-boxwidth - Ukuran Lebar Widget
-cellspacing - Spasi diantara cells
-borderColor - Warna Border
-thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
-fntsize - Ukuran Font pada title
-acolor - Warna title
-aBold - Tebal huruf pada title? (true or false)
-numposts - Jumlah recent post yang ditampilkan?
-home_page : http://NamaBlogKamu.com/ (Ganti dengan URL blog kamu)

4. Apabila sudah selesai simpan dan lihat hasilnya.

Salam Tips Blogger...


Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

0 comments:

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...