Cara Menambahkan Widget Recent Comments untuk Blogger

Hari ini, saya akan membagikan tutorial cara menambahkan widget recent comments untuk Blogger. Widget recent comments ini nantinya akan menampilkan komentar terbaru pada sidebar blog Anda, dengan menunjukkan sebuah potongan dari komentar terakhir bersama dengan judul posting di mana komentar itu dibuat. Komentar akan dikumpulkan dalam urutan dengan komentar terbaru di bagian atas dan yang lebih lama di bagian bawah.

Widget ini sendiri menggunakan Kode JavaScript dan CSS, untuk memasangnya ikuti langkah-langkah berikut:

1.  Masuk ke akun Blogger Anda.
2. Tambahkan sebuah widget baru. Caranya, pilih Tata letak - Tambahkan Gadget - HTML/JavaScript.
3.  Selanjutnya pastekan kode di bawah ini ke 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/AVvXsEjDQQlZHxIFUBcDBsM-f68EmW7g2jkhvZ0v4hpufNxOIGmRXOihdxJTTaTjJY2EH49K0X3wb6b3-g7FyYK9ZenMfa5wtGyeN_VaPDA7_pUoIqckoDVcaMEUwrvws6euPPajCZ5UCsH3BUuG/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/AVvXsEjDQQlZHxIFUBcDBsM-f68EmW7g2jkhvZ0v4hpufNxOIGmRXOihdxJTTaTjJY2EH49K0X3wb6b3-g7FyYK9ZenMfa5wtGyeN_VaPDA7_pUoIqckoDVcaMEUwrvws6euPPajCZ5UCsH3BUuG/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/AVvXsEixIgfzsu5uAFg3pFYVbWhcXL2gV5B0SWU_Wd1ZnAOsVtwFnz1zmeYNYJQS0xTU8IKa46Ng8qy4Vi5XbfAZ0L7Xpzd6xZ00w5wNoF48fVDyCa64VTzjKr6XSPrHNHjuHR_tzzNTH84SJW7i/"+avatarSize+"/blogger.png"}else if(authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){authorAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qhBNE-Oh2_zPqPutC2ZSXULL5aYVeIkv1nTQ0kgAeVC0fsHslIKwLJmb2VElzDsp0OLRDyby-nhPI2nTXNgFcQgcCnlLJH-c5TjQSGMcMa4Y0cr5_9aLqqt8AgaN_wSZlRov3w_tA5Mi/"+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>
<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>

4. Klik Simpan.

Kostumisasi Widget Recent Comment  

Untuk membuat tampilan berbeda, silahkan edit kode CSS diatas. cari kode yang seperti di bawah ini.

<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/AVvXsEjDQQlZHxIFUBcDBsM-f68EmW7g2jkhvZ0v4hpufNxOIGmRXOihdxJTTaTjJY2EH49K0X3wb6b3-g7FyYK9ZenMfa5wtGyeN_VaPDA7_pUoIqckoDVcaMEUwrvws6euPPajCZ5UCsH3BUuG/s1600/default-avatar.jpg", (avatar default)

Nah gimana sobat  begitu gampang sekali bukan ? saya yakin jika Anda membaca dan mengikuti tutorial diatas insya Allah bisa , bahkan newbie sekalipun yang baru saja mengenal blog kemaren sore , bisa mempraktekan hal semacam ini.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates:

Artikel Terkait