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!

3 Responses to "Membuat Recent Comment dengan Avatar Untuk Blogger Keren"

  1. Ngk work gan kodenya... kalau boleh ane req kode widget recent post dengan tag artikel gan.. tnks!

    ReplyDelete
    Replies
    1. seharusnya work gan, krna ane pke script yg sama. Kalo emang gak work agan pindahin file .js "https://sites.google.com/site/dzultemplate/javascript/dzul_recentcomment.js" ke hosting lain gan..

      Delete
    2. ini gan tutorial recent postnya: http://dzulaceh.blogspot.com/2015/06/membuat-widget-recent-post-berdasarkan.html

      Delete

PENTING!!!
1. Berkomentarlah dengan topik yang relevan dan tidak melakukan SPAM
2. Mohon untuk tidak memasukkan link aktif
3. Untuk memasukan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI</i>
4. Komentar anda akan dimoderasi terlebih dahulu sebelum dipublikasi.

NB: Sebelum memasukkan kode silahkan parse terlebih dahulu dengan menggunakan tool konversi kode.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel