1/19/17

Widget Recent Comments untuk Blogger

Halo sobat blogger semua. Di postingan kali ini saya akan membagikan tutorial cara Menambahkan Widget Recent Comments untuk Blogger / Widget Komentar Terbaru untuk Blogger.

Widget 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 Recent Comments untuk Blogger

Widget ini sendiri menggunakan Kode JavaScript dan CSS, untuk menambahkan Widget Komentar Terbaru ke blog Blogger ini sangat mudah. Cukup ikuti langkah-langkahnya di bawah ini:

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://1.bp.blogspot.com/-7HXQVxBPZgc/Vz8vPYa9wcI/AAAAAAAAAIY/jrGv0m0tcrM1lMrQdiBRIr_LvS9p58iSgCLcB/s1600/default-avatar.jpg",
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://1.bp.blogspot.com/-7HXQVxBPZgc/Vz8vPYa9wcI/AAAAAAAAAIY/jrGv0m0tcrM1lMrQdiBRIr_LvS9p58iSgCLcB/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="http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png"}else if(authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){authorAvatar="http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+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://1.bp.blogspot.com/-7HXQVxBPZgc/Vz8vPYa9wcI/AAAAAAAAAIY/jrGv0m0tcrM1lMrQdiBRIr_LvS9p58iSgCLcB/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.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai