Menambah Widget Komentar Terbaru Dengan Gambar Avatar

Bissmillah… Semalam kita baru saja mengupas tuntas tentang cara Membuat Effect Box Circle untuk Gambar Banner dengan CSS. Kali ini saya akan memberikan anda Widget yang Jitu yang sangat cocok untuk mempercantik tampilan Recent Comment artikel blog anda.

Untuk mendapatkan tampilan yang menarik pada blog kita tidak lah mudah. Ada kalanya kita harus mencocokkan warna widget dengan warna latar belakang blog kita. Namun tutorial untuk Menambah Widget Komentar Terbaru Dengan Gambar Avatar ini insyaAllah akan cocok untuk semua versi latar belakang dari sidebar blog anda. Namun sayangnya widget ini menggunakan JavaScript yang mungkin sedikit mengganggu loading blog anda. Tapi tidak ada salahnya untuk mencoba menggunakan widget ini, karena dari segi tampilan cukup professional, dan menurut saya widget ini tidak terlalu memberatkan loading blog anda.

Saya rasa sudah cukup jelas untuk keterangan dari widget ini, langsung saja kita menuju tutorial pembuatannya.

Menambah Widget Komentar Terbaru Dengan Gambar Avatar

1. Masuk ke Dashboard blog anda
2. Pilih menu Tata Letak dan Tambahkan Gadget
3. Ambil HTML/JavaScript, kemudian masukkan script berikut kedalamnya:

<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_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;}
.w2b_recent_comments li .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;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;

//]]>
</script>
<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script>
<script type="text/javascript" src="https://blog.sifirman.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></div>

Keterangan:
–  numComments = 5, ganti angka 5 dengan jumlah komentar yang ingin anda tampilkan.
–  avatarSize = 40, ganti 40 untuk mengatur besarnya gambar avatar komentar
–  characters = 100, ganti 100 dengan jumlah karakter komentar yang ingin anda tampilkan.
–  w2b_recent_comments&max-results=5, ganti angka 5 sesuai dengan “numComments=5” (Jumlah max-results dan numComments harus sama).
–  Ganti URL https://blog.sifirman.com dengan alamat URL blog anda.

4. Simpan, dan silahkan cek di tampilan blog anda.

Akhirnya selesai juga artikel tentang Menambah Widget Komentar Terbaru Dengan Gambar Avatar ini, semoga bermanfaat bagi kita semua. Jika berhasil jangan lupa ucapkan alhamdulillah, dan jika terjadi kegagalan, agar sekiranya sobat tidak sungkan untuk berdiskusi langsung di form komentar dibawah.