Cara Membuat Widget Recent Comments Keren di Blog

Dengan memasang Widget Recent Comment di blog dapat memudahkan Anda dan juga pengunjung untuk mengetahui komentar terkahir yang baru saja masuk ke blog Anda.

Image from : premium.wpmudev.org

Sesuai judul diatas, kali ini saya akan membagikan cara bagaimana membuat widget recent comment yang keren di blog Anda.  Widget recent comment ini di lengkapi dengan wajah avatar orang yang berkomentar sehingga selain terlihat cantik, jiga mempermudah melihat siapa saja yang berkomentar. Kelebihan widget recent comment ini adalah sudah valid html5, jadi bagi Anda pecinta validator, tidak usah susah - susah untuk mengeditnya lagi.

- Artikel pilihan : Cara Membuat Menu Navigasi Responsive Keren Di Blog

Untuk bagaimana cara membuatnya, silahkan ikuti langkah sederhana dibawah ini :

Cara Membuat Recent Comment Keren di Blog

1. Silahkan masuk pada dashboard blog Anda.
2. Masuk pada menu Tata Letak >> Tambah Gadget >> tambahkan HTML/JavaScript.
3. Copy dan Paste kode dibawah 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 #ddd;}
.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  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='admin';
//]]>
</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>

- Baca juga : Cara Memasang Widget Pada Blog Perlabel Berdasarkan Kategori

Penjelasan kode diatas :

• numComments : 7 (jumlah komentar yang ditampilkan)
• showAvatar      : true (ganti "false", jika ingin menyembunyikan avatar)
• avatarSize        : 35 (ukuran avatar dalam pixel)
• roundAvatar    : true (avatar bulat)
• characters       : 50 (jumlah karakter isi komentar)
• defaultAvatar  : "http://www.gravatar.com/avatar/?d=mm" (avatar default)
• adminBlog      : 'admin' (Dapat diganti dengan nama Anda)

Demikian Cara Membuat Recent Comment Keren di Blog, caranya cukup sederhana dan cepat untuk membuatnya. Jika ada pertanyaan silahkan sampaikan pada kolom komentar. Semangat!

Tweet

Subscribe to receive free email updates: