Cara membuat 2 style widget recent comments di Blogger
Kadang sulit untuk mengetahui di postingan mana ada komentar terbaru yang masuk, apalagi jika postingan di blog kita sudah banyak, salah satu cara untuk mengetahui komentar terbaru yang masuk adalah dengan memasang widget Recent comment ini.

Sebelumnya juga sudah pernah dibagikan cara membuat show-hide button komentar blog. Nah, berikut ini seocips akan membagikan 2 widget recent comments untuk Blog Blogger, silahkan kamu pilih mana yang cocok dengan tampilan blog kamu.

1. Widget recent comment efek tooltip

Widget Recent Comments v1
Widget Recent Comments 1

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget diblog kamu,
<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/share/newbe/recent-comments-seocips.js" type="text/javascript"></script>
<script src="http://www.seocips.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.seocips.com/2016/01/2-style-widget-recent-comments-untuk-blogger-blog.html" target="_blank" title="widget recent comment">Get This Widget</a></small></div>
3. 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.seocips.com dengan url blog kamu.
5. Simpan dan lihat hasilnya.


2. Widget recent comment V2.

Berikut adalah widget recent comments yang ke 2 dan ini tanpa efek tooltip.

Widget Recent Comments With Avatars For Blogger Blog
Widget Recent Comments 2


Nah sekian widget recent comment yang dapat dibagikan saat ini, selamat mencoba, salam Bloggers.
0 Komentar untuk "2 Style Widget Recent Comments Untuk Blogger"