Cara Membuat Recent Post Dengan Thumbnails

Posted by admin on Thursday, November 11, 2010

Blog Tutorial – Pada tutorial blog kali ini adalah bagaimana cara menampilkan recent post disertai dengan gambar pada postingan. Dengan adanya gambar akan menarik para pembaca untuk membaca postingan tersebut. Tertarik membuatnya? Ikuti langkah berikut!


Cara membuatnya adalah sebagai berikut.

Login di Blogger dengan account anda

Klik Layout pada Dashboard anda

Klik Add a Gadget lalu pilih HTML/Javascript

Masukkan kode script di bawah ini, lalu Save

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

Letakkan widget ini pada sidebar yang ada inginkan, terserah anda.

Hal yang perlu diubah adalah :
  • Boxwidth :  lebar widget
  • Cellspacing :  space antara cells (default: 1)
  • borderColor :  warna border
  • thumbwidth & thumbheight :  lebar dan panjang thumbnail (default: 40)
  • fntsize :  ukuran huruf judul postingan
  • acolor :  warna huruf judul postingan
  • aBold :  bla ingin ditebalkan adalah true, jika tidak false
  • numposts :  berapa banyak recent post yang akan ditampilkan
  • home_page :  ganti dengan URL blog anda

Pastikan juga seetingan site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting > Site Feed > Full > Allow Blog Feeds.

Selamat mencoba dan semoga bermanfaat!

{ 0 comments... read them below or add one }

Post a Comment