Widget Recent Comments With Avatars For Blogger Blog
Ditulis oleh: Ditulis pada: April 15, 2022
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.
 |
| Widget Recent Comments |
Widget Recent Comments Blogger
1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget diblog anda.
<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(https://2.bp.blogspot.com/-drq4FvmBMKU/VpckMFf6xSI/AAAAAAAAF9M/9-QLdRGGBAg/s1600/Avatar-Blogger%2BComments-anisuka.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-anisuka.js” type=”text/javascript”></script>
<script src=”https://www.anisuka.com/feeds/comments/default?alt=json&callback=tampilkankomentar” type=”text/javascript”></script>
</ul>
</div>
<div style=”font-size: 60%; text-align: right;”>
<small><a href=”https://www.anisuka.com/2022/04/widget-recent-comments-for-blogger.html” target=”_blank” title=”widget recent comment”>Get This Widget</a></small></div>
3. Perhatikan kode diatas, kode yang berwarna diatas, silahkan disesuaikan dengan selera Anda :
- var jmlkomentar = 5, (jumlah komentar yang ditampilkan)
- var jmlkarakter = 60;, (jumlah karakter yang ditampilkan)
- Ganti https://www.anisuka.com dengan url blog Anda,
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.
Selanjut masih berhubungan dengan komentar blog coba lihat:
- Recent comments V3
- Memasang Most comment widget di blog
- Widget artikel paling banyak komentar
- Memasang Emotions di Blog
- Cara memasukan gambar di komentar blog
- Cara menulis element terlarang pada komentar Blog
Ok sekian widget yang dapat dibagikan oleh anisuka.com saat ini, Salam sukses.
