Kode HTML Widget Komentar Terbaru Dengan Avatar

Widget Komentar Template Vienna Lite 2 | Cara pasang komentar vienna lite 2 | Halo, sahabat Madya. Pernahkah Anda menggunakan template buatan Arlina Design yang bernama Vienna Lite 2? Di sana, terdapat widget komentar namun widgetnya tidak bekerja. Bagaimana mengatasinya?

Sebelumnya, Madya berterimakasih kepada Mbak Arlina Design yang sudah membagikan template-template karyanya dengan cuma-cuma. Salah satu dari template nya yang Madya pakai di salah satu blog adalah template Vienna Lite 2.

[Baca juga : Kode HTML Follow by Email Keren di Blog]

Latar Belakang

Alasan mengapa template Vienna Lite 2 dipilih Madya adalah simpel, elegan, dan sesuai dengan niche atau tema blog Madya gunakan. Maka dari itu, banyak juga yang memakai template Vienna Lite 2 dari mbak Arlina ini.

Sepertinya ada 2 model dari template Vienna Lite 2 yakni versi gratis dan versi premium. Mungkin, bedanya adalah kode-kode dan layanan aftersale yang diberikan. Di sini, Madya memakai yang versi free alias gratis.

Dalam versi yang gratis itu, langsung Madya coba dan ada widget yang tidak work. Yaitu widget komentar baru dengan avatar. Entah mengapa, sudah tulis komentar di salah satu artikel namun komentar itu tidak muncul di widget nya.

Mungkin, tidak muncul nya komentar disebabkan tidak ada kode widget yang terpasang. Kenapa tidak terpasang? Ya mungkin, karena template yang digunakan adalah versi gretongan alias geratis. Tapi itu sudah cukup, thanks to arlina.

Mencoba mencari-cari kode nya namun tetap tidak ketemu. Walhasil, Madya pun mencoba mencarinya di situs pencarian. Dengan kata kunci "widget komentar terbaru dengan avatar" muncul lah beberapa hasil.

Dan masing-masing kode yang diberikan sudah diujicoba di blog tersebut dan memang beberapa ada yang berhasil dan ada yang tidak. Yang jelas, kesemuanya memiliki susunan kode yang banyak dan kemungkinan memberatkan page loading blog.

Yang kemudian membuat Madya berpikir ulang untuk menggunakan kode tersebut atau tidak. Akhirnya, Madya pun memutuskan tidak menggunakan kode-kode itu. Mau tidak mau, Madya akan menggunakan kode yang ada di dalam blog versi demo nya.

[Baca juga : AdSense Blog ditolak karena Melanggar Kebijakan]

Kode Widget Komentar Vienna Lite 2

Dan ketemu juga kode widget komentar untuk template Vienna Lite 2. Kode tersebut ditemukan dari blog template Vienna Lite 2 yang versi demo nya. Dari hasil utak-atik, berikut ini kode widget komentar untuk template Vienna Lite 2 :

<style scoped='' type="text/css"> #HTML4 .widget-content {max-height:300px;overflow:auto;} ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4} </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+=" <li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("https:")?"https:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEuXpPBNLf8YH5jpV_k3UE10d3CWPXnwnhP_NPBxle-rheVzWuKVLdJCD6czRikbOKiZYGfpudWDGBvyQm9OG2B4xd46cd6r9GEM_88-u5MgGww1HLPTb9wMgD2cCnQr1wQEnFHdV4SJhe/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0f4lJnq9vrJCcKLPhPdLX2NLR98mvDdYKr77pWwTTMKNkxTV5Gm69JsSKkBKjVue7OKj1sLRcbXIMphavN6CZyjfB1-ajTB3gXitsvepwE6Y3zRtP8cXHjQj68V4OElrp3MehiGYrQSeg/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"> <img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div> '),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="…",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li> "}e+="</ul> ";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOLr6oCIxV9EJIDN5wgj5kQ8H65P_rpMMI60cJrv25e7mpQhyphenhyphenUH-i9-0XBPlwnPs4isyPyQHQURdkO47D-7DmHqd8aAQW3_PNcpcF_XP8H8kUXNMQpnkSii1iDL33AJHpQF5aUSZf6dcV/s1600/Blogger.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD8bdP_D8VSxZhWaLAMZCiBK7gpfmtgsbpbxnF-a9joGh9P-ZpX2lQh5jrmYpgWiZ-zxGeKSdgd8PZaF2JeK0FFt82V7NxEqW-qTKLyRgVH2-2uYQ0i3eTcswEnT3-tQxYgSiFXY-CVUqH/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More »",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar; //]]> </script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=arlinacomments&max-results=15"></script>

Silahkan salin kode di atas dan tempelkan di widget komentar nya. Tidak perlu merubah atau edit kode apapun. Cukup salin dan tempel, maka hasilnya akan bekerja. Berbeda dengan kode-kode lain yang mengharuskan edit-edit kode.

[Baca juga : Kode HTML Tulisan Berjalan di blog]

Cukup mudah, bukan?! Silahkan komentar jika tidak work atau yang lainnya. Terima kasih!