Tutorial Membuat Simple Recent Comment

Pada entri ini, saya akan berkongsi satu widget recent comment yang simple je seperti screenshot diatas. Macam mana, menarik bukan. Nak letak pada blog anda? ikut tutorial dibawah k.

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "https://sites.google.com/site/faiztutorial/home/imej/none-img.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/faiztutorial/home/javascript/recentcomment1.js"></script>
<script type="text/javascript" src="http://faiz-tutorial.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

## Gantikan:

• http://faiz-tutorial.blogspot.com - Tukarkan kepada URL blog anda.
• numComments  = 5 - Jumlah komen yang akan dipaparkan

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..