Cara Membuat Recent Comment Dengan Avatar

Widget recent comment adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget recent comment ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya. Recent comment juga berfungsi sebagai pemberitahuan siapa saja yang berkomentar di postingan kita, jadi kita dengan mudah juga melihat siapa yang telah berkomentar di setiap postingan kita.

Untuk membuat widget recent comment dengan avatar, ikuti langkah-langkah di bawah ini:

   1. Login ke Blogger

   2. Masuk ke Tata Letak

   3. Lalu pilih Tambah Gadget

   4. Kemudian pilih Javascript/HTML

   5. Salin script di bawah dan tempelkan di kotak yang disediakan:

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_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;}
.avatarImage:hover{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/wirabazkara/recent-comment-wirabaz.js"></script>
<script type="text/javascript" src="http://wirabaz.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Keterangan:

Teks yang berwarna merah kalian ganti dengan URL blog kalian

   6. Setelah selesai, silakan simpan Template kalian terlebih dahulu.

Bila ada yang ingin bertanya, silakan bertanya di kolom komentar. Sekian artikel dari saya kali ini, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya.