Tuesday

Memasang Recent Post With Thumbnail + Comment Count

Sebelum ni aku dah pos mengenai Related Post berthumbnail, kali ini Recent Post plak berthumbnail. Hebat betul Kranthi memcipta widget sebegini.

Widget ini berthumbnail belah kiri, ianya nampak kemas dengan tajuk pos diboldkan dan jumlah komen di bahagian hujungnya. Selain itu ia juga dilengkapi Comment Count untuk memudahkan kamu memantau entri-entri kamu.

Dan yang terakhir pastikan setiap entri kamu mempunyai gambar, barulah tutorial ini baru berfungsi secun-cunnya.



Memasang Recent Post With Thumbnail + Comment Count

01. Pilih Layout > Page Element > Add a Gadget : Pilih HTML/JavaScript.

02. Tambahkan kod ini.

<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 = "#ffffff";
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://dilarangmelarang.blogspot.com/";
</script>
<script src="http://files.dilarangmelarang.com/javascripts/recentposts_thumbnail.js" type="text/javascript"></script>


Secara amnya, widget ini hanya untuk sidebar putih. Tukarkan nilai #ffffff pada bgTD kepada nilai lain bergantung kepada background sidebar kamu. Gunakan add-on Color Zilla untuk kemudahan kamu.

Dan satu lagi, sila upload sendiri javaskrip ke dalam hosting kamu sendiri.

03. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin Recent Post With Thumbnail seperti biasa.

Terima kasih Eins sebab berkongsi plugin ini.

19 comments:

  1. Tq Juki.

    ps : Bila / dah masuk poli ke??

    ReplyDelete
  2. DM tu macam nama team DoTa aku je :P
    [dM]

    ReplyDelete
  3. bro ada masalah skit tentang background. cam mana nak wat transparent plak?

    ReplyDelete
  4. @Eriyza, akan masuk bulan depan.

    @mohdisa, cuba buang terus kod bgTD = "#ffffff";.

    ReplyDelete
  5. wah ni baru pertama kali nampak ni..bagus juga ni...

    ReplyDelete
  6. okay juki, aku test jap. tp bukan taip transparent je ke?

    ReplyDelete
  7. thanks juki, dah jadi. kena taip transparent. hehe

    ReplyDelete
  8. juki... terima kasih...
    best tutor ni. kaw kaw best..
    erk.. tak berat ke?

    ReplyDelete
  9. @mohdisa, bagus bagus bagus.

    @Mr. Azman @ Kreuger, tak adalah berat sangat. Bolehlah tahan, hehe.

    ReplyDelete
  10. terima kasih untuk ko gak, banyak tutorial yang aku blh study kat cni. hehe

    ReplyDelete
  11. bagus..dh praktikkan kat blog sy

    ReplyDelete
  12. fuh. smart!

    siap ada thumbnail lagi. memang cool.

    ReplyDelete
  13. "#transparent" ke transparent ?
    tak jadi pong..

    ReplyDelete
  14. @naDDy, transparent kot.

    ReplyDelete
  15. waaa bagus2..
    lame dah aku duk carik javascript camni.
    thanks byk2.. :D

    ReplyDelete
  16. cam bgus je ni..
    nak try ler..trime ksh..ngeh2..

    ReplyDelete