Cara Memasang Recent Comments Widget di Blogger
Snippet Tips Blogger Widget
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+=" …"}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+=" …"}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
See the Pen Cara Memasang Recent Comments Widget di Blogger by Namina Kiky (@NaminaKiky) on CodePen.
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.