Cara Memasang Recent Comments Widget di Blogger

Recent Comments Widget adalah sebuah widget yang cara kerjanya adalah menampilkan daftar komentar terbaru yang masuk di blog. Widget ini cukup bermanfaat bagi Anda yang ingin menampilkan komentar terbaru di blognya dan juga Anda tidak perlu lagi repot-repot mengecek komentar terbaru di dasbor Blogger karena komentar akan muncul di blognya langsung.

Cara Memasang Recent Comments Widget di Blogger

Selain itu, dengan memasang widget ini. Akan memberikan daya tarik untuk pengunjung untuk melihat pokok bahasan apa yang sering ditanyakan pengunjung blog.

Oke, tanpa berlama-lama mari kita simak tips Cara Memasang Recent Comments Widget di Blogger berikut ini.

Cara Memasang Recent Comments Widget di Blogger


Di sini saya akan memberikan 2 opsi gaya Recent Comments Widget. Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan kode berikut ini di atas kode </head>

Opsi 1

<style type='text/css'>
#recent_comments{padding:0;margin:0;max-height:320px;overflow-x:hidden;overflow-y:scroll}
#recent_comments li{padding:10px 0;font-size:14px}
#recent_comments li a.recencmtitle{color:#222;display:block;margin:0 auto 10px auto;font-weight:700}
#recent_comments li .recencmbody{background:#fdf1ca;color:#000;display:block;padding:10px;margin:0 5px 0 0;border-radius:5px;line-height:normal;box-shadow:0 2px 0 rgba(0,0,0,0.1);}
#recent_comments li:nth-child(odd) .recencmbody{background:#def7fd}
</style>
<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 15;
var characters  = 80;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||15,characters=characters||80;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<a class='recencmtitle' href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" ";commentsHtml+="<span class='recencmbody'>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

Opsi 2

<style type='text/css'>
#recent_comments{padding:0;margin:0;max-height:320px;overflow-x:hidden;overflow-y:scroll}
#recent_comments li .recencmbody{color:#222;padding:0;margin:0 5px 0 0;line-height:normal}
#recent_comments li a.recencmtitle{color:#222;display:block;margin:0 auto 10px auto;font-weight:bold}
#recent_comments li{font-size:14px;list-style:none;padding:0 0 15px 15px;position:relative;border-left:1px solid rgba(0,0,0,0.1);margin:0;margin-left:6px}
#recent_comments li:before{content:"";background:#f39c12;height:12px;width:12px;display:block;border:2px solid #fff;border-radius:100%;float:left;position:absolute;top:6px;left:-6px}
</style>
<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 15;
var characters  = 80;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||15,characters=characters||80;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<a class='recencmtitle' href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" ";commentsHtml+="<span class='recencmbody'>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

Pilih salah satu dari 2 opsi di atas.

Setelah itu klik tombol Simpan tema. Selanjutnya tambahkan kode ini di dalam widget baru di Tata Letak untuk memunculkan daftar komentar terbaru dari Blogger.

<script type='text/javascript'>
document.write("<script src=\"/feeds/comments/default?alt=json&callback=recent_comments\"><\/script>");
</script>

Selesai! Silakan lihat hasilnya di blog Anda.

Pratinjau Opsi 1



Pratinjau Opsi 2

See the Pen Recent Comments Widget di Blogger by Namina Kiky (@NaminaKiky) on CodePen.



Sekian dari Namina, terima kasih sudah berkunjung dan semoga bermanfaat.

Related Posts

Load comments

Comments