Blogger Recent Comments Widget dengan Avatar

Beberapa hari yang lalu, saya sudah pernah membagikan Disqus Recent Comments Widget untuk Blogger. Namun, ternyata saya lihat masih banyak blogger yang masih setia menggunakan komentar blogger. Untuk itu, kali ini saya akan membagikan tutorial Membuat Blogger Recent Comments Widget dengan Avatar di Blogger.

Blogger Recent Comments Widget dengan Avatar

Fungsi dari recent comments widget adalah untuk menampilkan komentar terbaru pada blog Anda. Sehingga, widget ini bisa menjadi alternatif untuk Anda ataupun pengunjung yang ingin mengetahui komentar terbaru pada Blog Anda.

Widget ini akan menampilkan avatar, nama komentator, dan isi komentar yang semuanya clickable (area yang bisa diklik). Selain itu, widget ini juga sudah valid HTML5, sehingga Anda tidak perlu repot-repot untuk melakukan validasi.

Untuk Anda yang ingin memasang blogger recent comments widget ini, silahkan ikuti langkah-langkah di bawah ini.

Membuat Blogger Recent Comments Widget dengan Avatar di Blogger

1. Masuk ke Blogger > Tata Letak > Klik “Tambahkan Gadget” > Pilih HTML/Javascript
2. Letakkan kode di bawah ini pada kolom widget HTML/Javascript tersebut.

<style scoped="scoped" type="text/css"> 
ul.wahyu_recent{list-style:none;margin:0;padding:0;}
.wahyu_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;}
.wahyu_recent li:hover{border: 1px solid #ddd;}
.wahyu_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}
.wahyu_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",
maxfeeds=50,
adminBlog='Wahyu Pratama';
//]]>
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/Wahyututorial/wahyututorial/master/recentcommentsblog.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=wahyu_recent&amp;&amp;max-results=50">
</script>

Keterangan :

numComments = 5 (silahkan ganti angka 5 untuk menentukan jumlah komentar yang ditampilkan)
showAvatar = true (true untuk menampilkan avatar, false untuk menyembunyikan avatar. Silahkan disesuaikan)
avatarSize = 35 (silahkan ganti angka 35 untuk menentukan ukuran avatar dalam satuan pixel)
roundAvatar = true (true untuk menampilkan avatar berbentuk bulat, false untuk menampilkan avatar berbentuk kotak/tidak bulat)
characters = 40 (silahkan ganti angka 40 untuk menentukan jumlah karakter isi komentar untuk ditampilkan)
defaultAvatar = “http://www.gravatar.com/avatar/?d=mm” (avatar default)
adminBlog=’Wahyu Pratama’ (nama admin blog, wajib diganti)

Sekian, semoga bermanfaat.

Leave a Reply