Widget komentar terbaru (Recent Comments) dengan profil avatar

HaiSob apa kabar lagi? pada kesempatan ini saya akan membagikan widget Recent Comment atau widget komentar terbaru dengan gambar avatarnya juga.

Salah satu cara untuk melihat komentar terbaru pada blog adalah dengan memasang widget Recent Comments. Biasanya Blog yang memasang Recent comment (widget komentar terbaru) ini adalah blog yang tidak mengaktifkan moderasi komentar. Jadi semisal ada komentar yang baru, maka bisa dilihat langsung pada widget ini.

Widget komentar terbaru (Recent Comments)


Widget Recent Comments With Avatars For Blogger Blog
Widget Recent Comments


Misal postingan blog kamu sudah banyak dan blog ramai banyak pengunjungnya maka akan sulit untuk mengetahui komentar baru yang masuk, maka salah satu cara untuk mengetahuinya adalah memasang widget recent comments ini.




Cara memasang Widget Recent Comments di Blogger


1. Di Blog kamu
2. Pilih menu Tata Letak lalu klik  Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript

Cara memasang Widget Recent Comments di Blogger
Tata Letak >> Tambah Gadget >> HTML / Javascript

4. Masukan kode dibawah ini ke dalam kotak yang tersedia.
<style>
/*Recent Comments*/
#komentar {border:1px solid #000;margin:5px 0;padding:5px;background: #444;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px; background: #333; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #000;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background: #444;
-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#fff;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img { border: 2px solid #000;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #333;background: url(http://2.bp.blogspot.com/-drq4FvmBMKU/VpckMFf6xSI/AAAAAAAAF9M/9-QLdRGGBAg/s1600/Avatar-Blogger%2BComments-seocips.jpg)repeat-x;}
#komentar ul li div.ismen {color:#fff;}
#komentar .ismen {display: block;font-size: 1.2em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1.2em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 3px solid #5858FA;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #5858FA;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
</style>
<div id="komentar">
<ul>
<script type="text/javascript">
//<![CDATA[
var jmlkomentar = 5;
var jmlkarakter = 60; //]]></script>
<script src="https://cdn.rawgit.com/Brando07/haisob/newbe/recent-comments-haisob.js" type="text/javascript"></script>
<script src="http://www.haisob.com/feeds/comments/default?alt=json&amp;callback=tampilkankomentar" type="text/javascript"></script>
</ul>
</div>
<div style="font-size: 60%; text-align: right;">
<small><a href="http://www.haisob.com/2017/05/widget-komentar-terabaru-recent-comments-with-avatars-di-blogger.html" target="_blank" title="widget recent comment">Get This Widget</a></small></div>
Perhatikan kode diatas, kode yang berwarna diatas, silahkan disesuaikan:
var jmlkomentar = 5, (jumlah komentar yang ditampilkan)
var jmlkarakter = 60;, (jumlah karakter yang ditampilkan)
Ganti http://www.haisob.com dengan url blog kamu,
5. Simpan dan lihat hasilnya.

Oh ya, walaupun kamu sudah memasang widget ini sebaiknya kamu rajin memantau akan komentar yang masuk, jangan sampai komentar Spam dibiarkan saja.
Join This Site