Cara Membuat Widget Komentar Terbaru dengan Avatar

Setelah sebelumnya saya membagikan artikel tentang cara membuat widget komentar terbaru atau widget recent comment dengan judul postingan dan widget recent comment ringan.

Kali ini saya akan memberikan widget komentar terbaru atau recent comment dengan menggunakan avatar atau biasa di sebut foto profil dari sebuah akun yang kita miliki.

(Baca juga : Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger)

Di widget komentar terbaru ini tidak hanya avatarnya saja yang menjadi kelebihan dari widget ini, akan tetapi pengaturannya yang cukup lengkap juga memudahkan untuk mengatur widget ini.

Cara memasangnya juga cukup mudah, karena kita tidak perlu menambahkan link blog kita ke dalam widget komentar terbaru ini.

Untuk cara memasang widget komentar terbaru dengan avatar, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Komentar Terbaru dengan Avatar

• Langkah pertama masuk ke akun Blogger kalian
• Pilih menu Tata Letak, kemudian pilih Tambahkan Gadget, lalu pilih HTML/Javascript
• Masukan Judul widget, kemudian masukan skrip di bawah ini

<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments 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  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFKpPSdcMPhIz1Fv80xuqlDtmwI7lPUdO9Z1pTV_QzkG77h0wyyk_sN8IRpbkSUg054SsdLpQKtQcaphbIwGXMKyE9cEz2lAF3dwf0xNAaFPwKf_Hm3nAADEDzCurmfj3wqJyov2SeUg1/s1600/default-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E=E||5,8=8||12,o=o||13,k=k||"h://4.F.p.f/-14/15/16/17/G/18-19.1a",H=H||" 1b &1c;",q=(r q===\'u\')?j:q,v=(r v===\'u\')?Q:v,m=(r m===\'u\')?j:m,I=(r I===\'u\')?Q:m;1d R(w){7 9;9=\'<S J="R">\';K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+="<U>";7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\'1g\'){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g("/G/")!=-1){3=3.B("/G/","/s"+8+"-c/")}e 6(3.g("/W/")!=-1){3=3.B("/W/","/s"+8+"-c/")}e 6(3.g("/X-c/")!=-1&&3.g("h:")!=0){3="h:"+3.B("/X-c/","/s"+8+"-c/")}e 6(3.g("N.f/C/1k-Y.O")!=-1){3="h://1.F.p.f/-1l/1m/1n/1o/s"+8+"/1p.Z"}e 6(3.g("N.f/C/1q-Y.O")!=-1){3="h://2.F.p.f/-1r/1s/1t/1u/s"+8+"/1v.Z"}e 6(3.g("N.f/C/1w.O")!=-1){6(k.g("1x.f")!=-1){3=k+"&s="+8}e{3=k}}e{3=3}6(q==j){6(m==j){n="1y"}e{n=""}9+="<10 J=\\"1z "+n+"\\"><C J=\\""+n+"\\" V=\\""+3+"\\" 1A=\\""+y+"\\" 1B=\\""+8+"\\" 1C=\\""+8+"\\"/></10>"}9+="<a A=\\""+x+"\\">"+y+"</a>";7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,"");6(d!=""&&d.z>o){d=d.1F(0,o);d+="&1G;";6(v==j){d+="<a A=\\""+x+"\\">"+H+"</a>"}}e{d=d}9+="<D>"+d+"</D>";9+="</U>"}9+=\'</S>\';7 P="";6(I==j){P="1H:1I;"}9+="<D 1J=\\"1K-1L:1M;1N:1O;1P-1Q:1R;"+P+"\\">1S 1T<a A=\\"h://w.p.f/\\"> 1U</a></D>";1V.1W(9)}',62,121,'|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write'.split('|'),0,{}))
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px"></div>

• Pengaturan widget :
• var numComments  = Ganti angka 5 dengan jumlah komentar terbaru yang ingin kalian tampilkan.
• showAvatar  = Ganti true menjadi false apabila ingin menyembunyikan avatar.
• avatarSize  = Ganti angka 60 dengan ukuran gambar avatar yang di inginkan.
• roundAvatar = Ganti true menjadi false apabila ingin menyembunyikan background berwarna putih yang ada di gambar avatar.
• characters  = Ganti angka 40 dengan jumlah karakter komentar yang ingin di tampilkan.
• showMorelink = ganti false dengan true apabila ingin menampilkan tulisan read more.
• moreLinktext = Ganti More » dengan tulisan read more yang kalian inginkan.
• defaultAvatar = ganti link berikut ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFKpPSdcMPhIz1Fv80xuqlDtmwI7lPUdO9Z1pTV_QzkG77h0wyyk_sN8IRpbkSUg054SsdLpQKtQcaphbIwGXMKyE9cEz2lAF3dwf0xNAaFPwKf_Hm3nAADEDzCurmfj3wqJyov2SeUg1/s1600/default-avatar.jpg dengan link gambar avatar yang kalian miliki, apabila tidak memilikinya biarkan saja.
• Setelah selesai mengaturnya, silahkan pilih Simpan
• Jika widget berhasil di pasang, maka akan muncul tampilan berikut.

(Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog)

Demikian tutorial cara memasang widget komentar terbaru dengan avatar dari saya, jika ada pertanyaan mengenai artikel ini silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial atau widget yang lainnya dari saya, silahkan untuk selalu mengunjungi blog Tutorial Umum.