Monday, March 21, 2011

Pasang Widget Artikel Terbaru dengan Gambar dan Scroll

Widget Recent Post dengan gambar thumbnails dan jumlah komentar.
Widget Recent post dipasang sebagai informasi mengenai artikel atau posting terbaru dari suatu blog. Untuk memasang widget ini biasanya dengan menambahkan gadget baru lalu pilih gadget feed, setelah itu masukkan alamat feed blog. Tetapi dengan cara ini hanya bisa menampilkan 5 artikel terbaru tidak bisa lebih, dan hanya menampilkan judulnya saja.

Nah agar tampilan widget lebih menarik dan cantik, ada widget buatan bloggertricks yang menampilkan recent post dengan gambar thumbnails dan hebatnya lg widget ini bisa menampilkan banyak artikel terbaru(tidak hanya 5) sekaligus.

Selain dengan preview gambar dan judul ditambah lg dengan jumlah komentar dibelakang judul artikel.Yang mau pasang ikuti langkah berikut:

1. Buka blogger.com untuk login ke dasbor
2. Pilih Layout/tata letak
3. Tambah sebuah gadget baru, pilih widget HTML/Javascript
4. Masukkan script berikut:




<div style="border: 1px solid rgb(153, 153, 153);overflow: auto;width:ancho;height:300px; padding: 10px;">
<ul>

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

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 15;

home_page = "http://www.newbie-blog.co.cc/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
</ul></div>



Keterangan :
  • Boxwidth = Tentukan lebar widget
  • Cellspacing = Jarak antar judul artikel
  • BorderColor = Garis tepi widget
  • thumbwidth = Lebar gambar
  • thumbheight = Tinggi gambar
  • fntsize = ukuran font judul
  • homepage = Ganti dengan alamat blog anda
  • dll
5. Simpan widget, dan lihat hasilnya.

beri komentar anda tentang blog ini
EmoticonEmoticon