Desain Widget Komentar Terbaru dengan Foto Komentator

Tips blogger kali ini adalah bagaimana cara kita menampilkan komentar terbaru disertai dengan foto (gambar) orang yang berkomentar terhadap artikel kita. Kenapa hal ini dirasa penting?

Dengan menampilkan komentar terbaru di dalam blog kita, paling tidak bisa memberikan gambaran kepada pembaca setia yang lain untuk bisa menegetahui "artikel terpopuler" dari blog kita.

Dengan demikian, pembaca setia akan merasa ingin menelusuri lebih jauh tentang beberapa komentar (baik berupa pertanyaan, saran atau mungkin penjelasan).

Setidaknya, itulah menurut pendapat FBI kali ini. Selain daripada itu, ada hal penting yang perlu rekan-rekan ingat. Bahwa:

Widget Komentar Terbaru, Recent Comments, atau Latest Comments berfungsi sebagai navigasi sekaligus internal link untuk meningkatkan pageviews. Daftar komentar juga terindeks Google, termasuk widget komentar yang disertai kutipan isi komentar.

So, penting juga bagi kita untuk menampilan widget komentar di dalam blog kita. Caranya tidak susah kok. Tinggal ikuti beberapa uraian berikut.

Cara Memasang Komentar Terbaru: Kutipan Isi pada Blog

Tips berikut untuk membuat widget komentar terbaru berupa daftar judul saja:
1. Klik "Layout" atau "Tata Letak".
2. Klik "Add a gadget" di salah satu sidebar atau footer.
3. Pilih "Feeds"
4. Masukkan kode http://URL blog Anda/feeds/comments/default
5. Ganti nama Gadget dengan "Komentar Terbaru"
6. Save!

Cara Memasang Komentar Terbaru: Kutipan Isi plus Nama Komentator

1. Layout > Add a Gadget > HTM/Javascript

2. Isi judul dengan "Komentar Terbaru"

3. Copas kode berikut ini di kotak isi:

<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);
if(o_rc==0){
document.write('</div>');
}
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
}
}
}
</script>
<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>
<script src=/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {
text-transform: capitalize;
}
.rcw-comments {
border-bottom: 1px dotted;
padding-top: 7px!important;
padding-bottom: 7px!important;
}
</style>

4. Save!

Cara Memasang Komentar Terbaru: Kutipan Isi, Nama, dan Foto Komentar

1. Layout > Add a Gadget > HTM/Javascript

2. Isi judul dengan "Komentar Terbaru"

3. Copas kode berikut ini di kotak isi

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

4, Save!

Ok guys. Tidak susah kan? Semoga dengan tips trik desain blog kali ini, bisa menambah kualitas blog Anda. Salam blogger.

Sumber: