Cara Membuat Widget Recent Comments di Blog dengan Avatar

Membuat widget recent comment atau komen terakhir di blog, tutorial ini sangat berguna bagi pemilik blog karena fungsinya adalah menampilkan history komen yang terjadi di artikel blog kita, jadi kita bisa memantau jika ada komentar baru dan akan lebih cepat untuk meresponnya sehingga pengunjung pun menjadi betah untuk berinteraksi melalui kolom komentar.

Turorial membuat widget recent komen ini saya dapat dari blog fahmyramdani saat hendak mencari tutorial cara memasang widget recent komen di google, karena agak ribet jika harus menunggu notifikasi dan membuka email saat ada komen.hehe

Courtesy Screenshot fahmyramdani

Tutorial Memasang Widget Recent Comment

- Masuk akun blogger
- Masuk menu layout atau tata letak
- Tambahkan Widget
- Pilih HTML/Javascript
- Lalu masukkan kode di bawah ini

<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #476481;;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 10,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "https://lh6.googleusercontent.com/-7KPbvU9OlKE/Uy0-3fMD_uI/AAAAAAAACQc/QjfFIZ2mYpU/s40/22.png",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Yanu Abi Alwi';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

- Save dan silahkan langsung lihat hasilnya

Terdapat beberapa pengaturan di bawah ini yang bisa di ubah-ubah

- NumComments = 5 (jumlah dari komentar yang tampil)
- ShowAvatar = true (false, bila mau menyembunyikan icon avatar)
- AvatarSize = 35 (ukuran dari avatar dalam pixel)
- RoundAvatar = true (pilihan avatar menjadi bulat)
- Characters = 40 (jumlah karakter dari isi komentar)
- DefaultAvatar = "https://lh6.googleusercontent.com/-7KPbvU9OlKE/Uy0-3fMD_uI/AAAAAAAACQc/QjfFIZ2mYpU/s40/22.png" (avatar default)
- AdminBlog='Yanu Abi Alwi' (nama admin yang akan di sembunyikan, wajib di ganti)


Demikian tutorial cara membuat atau menampilkan widget recent comment / komen terbaru di blog, semoga bermanfaat, terima kasih telah mampir dan membaca.

Tested di blog catatandroid