Membuat Recent Comment dengan Avatar Untuk Blogger Keren

Membuat Recent Comment dengan Avatar - Bagi para blogger yang blognya aktif dikunjungi tentunya sangat membutuhkan widget Recent Comment karena dengan widget ini akan mempermudah dalam mengelola komentar-komentar dari para pengikut/pembaca.

Berikut ini saya bagikan cara mudah membuat widget Recent Comment (Komentar Terkini) dengan Avatar. Cara Pemasangannya sangat mudah, yaitu silahkan buat widget baru HTML/JavaScript dan copas kode di bawah ini didalamnya.
<style type="text/css"> 
ul.dzul_komentar{list-style:none;margin:0;padding:0;} 
.dzul_komentar 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;} 
.dzul_komentar li:hover{border: 1px solid #ddd;}
.dzul_komentar 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} 
.dzul_komentar li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 4,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='dzul Aceh';
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/dzultemplate/javascript/dzul_recentcomment.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=dzul_komentar&amp;&amp;max-results=50">
</script>
Agar tampilan lebih menarik, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :

numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='dzul Aceh' (nama admin blog, wajib diganti)
Nama adminBlog ganti dengan nama profil google anda.

Semoga Bermanfaat!
Pak DZ

Guru Matematika SMA Negeri 5 Kejuruan Muda

3 Comments

Previous Post Next Post