Cara Menambahkan Widget Recent Comments di Blogger

Sekarang waktu mengomentari blog juga merupakan cara terbaik untuk meningkatkan visibilitas postingan Anda di Search Engine Results -- karena masalahnya banyak pengguna membahas tentang Post di dalam komentar -- dan permasalahannya sangat berdampak jelas di Search Engine -- Jadi ini adalah alasan bahwa Pengunjung datang ke Blog anda. Di blog ini kolom komentar menjadi salah satu peran utama dalam SEO. Banyak orang malas membalas komentar pengunjungnya tapi anda perlu berinteraksi dengan pengunjung anda dan mengatasi masalahnya dalam komentar. Di sisi lain, rasio teks yang baik tetaplah hal utama naiknya Halaman Web Anda.

Agar anda dapat mudah memahaminya saya akan menggambarkannya dengan sebuah Contoh: Jika anda memiliki artikel dan banyak komentar yang relevana atau berkaitan dengan Post anda, saya yakin Post anda pasti akan masuk dalam Search Engine Results. Anda hanya perlu berkonsentrasi pada pengunjung Anda yang berkomentar dan Memecahkan pertanyaan atau masalahnya sesegera mungkin. Ini juga membantu Anda agar pengunjung blog anda meningkat dan mau kembali berkomentar.

Jadi, sangat penting untuk menambahkan widget recent comment ke blog Blogger anda untuk mendapatkan beberapa lalu lintas organik dari Search Engine dan Itu Berarti Lebih Banyak Komentar Organik = Visibilitas Search Engine jadi lebih banyak. Berikut adalah widget recent comment terbaik untuk Blogger yang juga menunjukkan profil avatar pengunjung.

Cara menambahkan Widget Recent Comments di blog Blogger Anda

Langkah 1.  Masuk ke akun Blogger Anda.

Langkah 2. Di dashbord blogger Anda tambahkan sebuah widget baru; Layout -> Add Gadget -> HTML/JavaScript).

Langkah 3.  Selanjutnya copy kode di bawah ini dan paste-kan ke kolom widget HTML/Javascript (yang tadi Anda tambahkan pada langkah ke 2).

<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var numComments  = 5, 
showAvatar  = true, 
avatarSize  = 100,
roundAvatar = true,
characters  = 40, 
showMorelink = true, 
moreLinktext = "More »", 
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZvfqtZjNpMBgvLgLtSVBDGkIjGfFGmtCLM1h4FOZgOpiwhlFBo-Q3TU-8Zm58lrX2POzcEBSBTqWXBYxBaO3CDVMwNMcAvM9PZsq99wqpjuhiEGv1j-WipPLhX8mMtsJFkNZAUTjJ9-aF/s1600/default-avatar.jpg",
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZvfqtZjNpMBgvLgLtSVBDGkIjGfFGmtCLM1h4FOZgOpiwhlFBo-Q3TU-8Zm58lrX2POzcEBSBTqWXBYxBaO3CDVMwNMcAvM9PZsq99wqpjuhiEGv1j-WipPLhX8mMtsJFkNZAUTjJ9-aF/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar=(typeof showAvatar==='undefined')?true:showAvatar,showMorelink=(typeof showMorelink==='undefined')?false:showMorelink,roundAvatar=(typeof roundAvatar==='undefined')?true:roundAvatar,hideCredits=(typeof hideCredits==='undefined')?false:roundAvatar;function tw_comments(helplogger){var commentsHtml;commentsHtml='<ul class="tw_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName,authorAvatar,avatarClass;if(i==helplogger.feed.entry.length)break;commentsHtml+="
<li>";var entry=helplogger.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;authorAvatar=entry.author[a].gd$image.src}if(authorAvatar.indexOf("/s1600/")!=-1){authorAvatar=authorAvatar.replace("/s1600/","/s"+avatarSize+"/")}else if(authorAvatar.indexOf("/s220/")!=-1){authorAvatar=authorAvatar.replace("/s220/","/s"+avatarSize+"/")}else if(authorAvatar.indexOf("/s512-c/")!=-1&&authorAvatar.indexOf("http:")!=0){authorAvatar="http:"+authorAvatar.replace("/s512-c/","/s"+avatarSize+"/")}else if(authorAvatar.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){authorAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLekgQIqqmoIvQLmtvkSmMZGSuWsa6ldk_UWWN5qekBzDWSiRhuy2dYMHAfS_KjA7jkqaA5h52uWBB4gkaFIxnLjHrpdwMzz-tyz64cBtl3T2c8VxpOPnLT0chnRHA_16d9zRherKJiB2/"+avatarSize+"/blogger.png"}else if(authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){authorAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih98mnjS6qfZRVE0v3XZwqN6kQkuIYatIRY-1zIaTf1djjQ2SgBB3kWxRwcJHkVwk3xRqb5WiGJNIAicM3ju0bsuuZIcVQp3xqdh1MciuwN4ZknPiJd19Ad_kb7FrDsqddJBBYPijNNMxP/"+avatarSize+"/openid.png"}else if(authorAvatar.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){authorAvatar=defaultAvatar+"&s="+avatarSize}else{authorAvatar=defaultAvatar}}else{authorAvatar=authorAvatar}if(showAvatar==true){if(roundAvatar==true){avatarClass="avatarRound"}else{avatarClass=""}commentsHtml+="<div class=\"avatarImage "+avatarClass+"\">
<img class=\""+avatarClass+"\" src=\""+authorAvatar+"\" alt=\""+authorName+"\" width=\""+avatarSize+"\" height=\""+avatarSize+"\"/></div>
"}commentsHtml+="<a href=\""+commentlink+"\">"+authorName+"</a>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+="&hellip;";if(showMorelink==true){commBody+="<a href=\""+commentlink+"\">"+moreLinktext+"</a>"}}else{commBody=commBody}commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>
"}commentsHtml+='</ul>
';document.write(commentsHtml)}
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=tw_comments&amp;max-results=5" type="text/javascript"></script>

Get this Recent Comments Widget
<style scoped="" type="text/css"> 
ul.tw_comments{padding-top:15px!important;display:inline-block}
.tw_comments li{float:left;height:85px;margin:0;width:100%;padding:0;list-style-type:none;border-bottom:1px solid #ddd;margin-bottom:15px!important}
.tw_comments li:last-child{border:0;margin:0!important}
.tw_comments li a{text-decoration:none;color:#666;width:100%;display:block}
.tw_comments li a:hover{color:#febd17}
.avatarImage img{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;width:70px;height:70px}
.avatarImage{float:left;width:80px}
.tw_comments li span{font-size:13px}
</style>

Langkah 4. Sekarang klik Tombol Save dan widget anda akan disimpan dan terpasang.

Itu saja langkah-langkah yang anda butuhkan! Jika Anda merasa mengatur banyaknya recent comments yangg ingin di tampilkan, huruf, dll, lanjutkan membacanya.

Kostumisasi Widget Recent Comment  

Untuk meng-edit ukuran font, warna huruf, dll, silahkan edit kode CSS berikut:

<style type="text/css" scoped>
ul.tw_comments{padding-top:15px!important;display:inline-block}
.tw_comments li{float:left;height:85px;margin:0;width:100%;padding:0;list-style-type:none;border-bottom:1px solid #ddd;margin-bottom:15px!important}
.tw_comments li:last-child{border:0;margin:0!important}
.tw_comments li a{text-decoration:none;color:#666;width:100%;display:block}
.tw_comments li a:hover{color:#febd17}
.avatarImage img{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;width:70px;height:70px}
.avatarImage{float:left;width:80px}
.tw_comments li span{font-size:13px}
</style>

Penjelasan script yang bisa dikostumisasi :

var numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true, (false, apabila ingin menyembunyikan avatar)
avatarSize  = 100, (ukuran avat)
roundAvatar = true, (avatar bulat)
characters  = 40, (jumlah karakter isi komentar)
showMorelink = true, (false, apabila ingin menyembunyikan tulisan More)
moreLinktext = "More »", (silahkan ganti tulisan More jika Anda Ingin merubahnya)
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZvfqtZjNpMBgvLgLtSVBDGkIjGfFGmtCLM1h4FOZgOpiwhlFBo-Q3TU-8Zm58lrX2POzcEBSBTqWXBYxBaO3CDVMwNMcAvM9PZsq99wqpjuhiEGv1j-WipPLhX8mMtsJFkNZAUTjJ9-aF/s1600/default-avatar.jpg", (avatar default)

Mulai sekarang, saat pengunjung melihat widget recent comment yang menampilkan profil avatar untuk Blogger di sidebar, dia akan berpikir blog Anda cukup aktif dan itu mendorongnya untuk memberi komentar di blog Anda. Dengan cara ini, Anda bisa mengumpulkan beberapa basis pengguna aktif yang mengomentari posting blog Anda.

https://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html