Cara Memasang Recent Comments Keren untuk Blog Anda

Bagus juga pasang widget recent comment di pinggir halaman blog supaya blognya terkesan interaktif sebab banyak yang memberikan komentar dan tampak ramai pengunjungnya sehingga blog tersebut kelihatan hidup. Memang bagus bagi yang menginginkan blognya ramai pengunjung. Salah satunya harus ada fasilitas interaksi atau komunikasi antara penulis blog dengan pengunjungnya.

Blog yang banyak komentarnya biasanya cepat populer dan tidak akan sepi pengunjung, sebab blog yang semacam ini menandakan pemiliknya mengurusinya dengan serius yang pastinya membuktikan bahwa pemiliknya benar-benar seorang blogger. Lihat saja contoh percakapan yang terekam di bawah ini.

Sedangkan cara memasangnya tinggal Anda tambahkan widget java script. Baca Panduan Memasang Widget Java Script. Lalu tempelkan ke dalamnya kode di bawah ini:

<style>
/*Recent Comments*/
#komentar {border:1px solid #000;margin:5px 0;padding:5px;background: #fff;-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: #fff; 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: #BFE3FE;
-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:#000;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(no jpg)repeat-x;}
#komentar ul li div.ismen {color:#000;}
#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: #000000;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/share/newbe/recent-comments-seocips.js" type="text/javascript"></script>
<script src="http://www.pusatsemangat.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="bit.ly/28JAQy2" target="_blank" title="widget recent comment">Get This Widget</a></small></div>

Ganti dulu: 
var jmlkomentar = 5; (ganti jumlah komentarnya)
var jmlkarakter = 60; (ganti jumlah hurufnya)
Alamat blog saya ganti dengan alamat blog Anda

SIMPAN!
Lihat hasilnya.

Baca juga recent comments sederhana yang gak kalah keren

Apabila masih kurang jelas, silakan tanyakan langsung kepada saya dengan mengisi kolom pertanyaan di bawah artikel ini. Insya Allah saya akan menanggapinya.

Tweet