Cara Memasang Recent Comments Widget

Templatesme.com - Selamat siang sobat kali ini saya akan membagikan sebuah tutorial Cara Memasang Recent Comments Widget. Apa itu Recent Comments ? sebuah widget untuk menampilkan daftar komentar terbaru yang masuk di blog.  Comments Widget ini cukup bermanfaat bagi Anda yang ingin menampilkan komentar terbaru di blog dan juga sobat tidak perlu repot-repot untuk mengecek komentar terbaru di dasbor 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.

Subscribe to receive free email updates:

0 Response to "Cara Memasang Recent Comments Widget"

Post a Comment