Cara Membuat Widget Komentar Avatar Yang Cantik Di Blog

Widget komentar yang diletakkan di sidebar atau di Footer, terkadang menjadi motivasi bagi pengunjung blog kita untuk memberikan komentar karena komentar mereka plus foto mereka langsung terpampang di widget komentator. Lho... Foto atau gambar dari komentator kok bisa terpampang di widget komentar? Karena Widget Komentar ini adalah Recent Comments Widget with Avatar (Widget Komentar yang menampilkan Avatar).

Tidak sedikit blog atau situs yang memasang widget komentar dengan avatar ini, karena selain bermamfaat buat blog dapat juga memperindah tampilan blog. Insyaallah untuk kedepannya, saya akan memberikan Tutorial Blogspot tentang cara buat widget komentar yang simple (Sederhana). Talk less do more, let's practice to make it.

Cara Membuat Widget Komentar Avatar di Blogger

• Sign In di blogger.com
• Pada Menu drop down, Pilih layout
• Klik Add a gadget dan pilih HTML/JavaScript
• Copy paste kode berikut pada kolom yang tersedia

<style type="text/css">
#rc ul{
  list-style:none;
  margin:0;
  padding:0;
}
#rc ul li{
  margin:0 0 6px !important;
  padding:0 0 6px 0 !important;
  display:block;
  clear:both;
  overflow:hidden;
  list-style:none;
}
#rc img{
  padding:3px;
  background:#fefefe;
  box-shadow:0 1px 1px #ccc;
  float:left;
  margin:0 6px 0 0;
  position:relative;
  overflow:hidden;
}
#rc span{
  margin-top:4px;
  color: #666;
  display: block;
  font-size: 12px;
  font-style: italic;
 line-height: 1.4;
}
</style>

<script type="text/javascript">
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 999999,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
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}('6 C=C||5,7=7||15,n=n||16,k=k||"h://17.M.f/N/?d=18",D=D||" 19 &1a;",o=(p o===\'q\')?j:o,r=(p r===\'q\')?O:r,m=(p m===\'q\')?j:m,E=(p E===\'q\')?O:m;1b 1c(F){6 8;8=\'<P 1d="1e"><Q>\';G(6 i=0;i<C;i++){6 u,v,2,w;4(i==F.R.9.x)1f;8+="<S>";6 9=F.R.9[i];G(6 l=0;l<9.H.x;l++){4(9.H[l].1g==\'1h\'){u=9.H[l].y}}G(6 a=0;a<9.I.x;a++){v=9.I[a].1i.$t;2=9.I[a].1j$1k.T}4(2.g("/U/")!=-1){2=2.z("/U/","/s"+7+"-c/")}e 4(2.g("/V/")!=-1){2=2.z("/V/","/s"+7+"-c/")}e 4(2.g("/W-c/")!=-1&&2.g("h:")!=0){2="h:"+2.z("/W-c/","/s"+7+"-c/")}e 4(2.g("J.f/A/1l-X.K")!=-1){2="h://3.Y.L.f/-1m-1n/1o/1p/1q/s"+7+"/1r.Z"}e 4(2.g("J.f/A/1s-X.K")!=-1){2="h://3.Y.L.f/-1t/1u/1v/1w/s"+7+"/1x.Z"}e 4(2.g("J.f/A/10.K")!=-1){4(k.g("M.f")!=-1){2=k+"&s="+7}e{2=k}}e{2=2}4(o==j){4(m==j){w="1y"}e{w=""}8+="<A 12=\\""+w+"\\" T=\\""+2+"\\" 1z=\\""+v+"\\" 1A=\\""+7+"\\" 1B=\\""+7+"\\"/>"}8+="<a y=\\""+u+"\\">"+v+"</a>";6 13=9.1C.$t;6 b=13.z(/(<([^>]+)>)/1D,"");4(b!=""&&b.x>n){b=b.1E(0,n);b+="&1F;";4(r==j){b+="<a y=\\""+u+"\\">"+D+"</a>"}}e{b=b}8+="<B 12=\'1G\'>"+b+"</B>";8+="</S>"}8+=\'</Q></P>\';6 14="";4(E==j){14="1H:1I;"}8+="<B 1J=\'1K:1L;1M:1N/1O 1P\'><a y=\'h://1Q.L.f/1R/11/1S-1T-1U-1V-N.1W\' 1X=\'10\'>1Y 1Z</a></B>";20.21(8)}',62,126,'||authorAvatar||if||var|avatarSize|commentsHtml|entry||commBody|||else|com|indexOf|http||true|defaultAvatar||roundAvatar|characters|showAvatar|typeof|undefined|showMorelink|||commentlink|authorName|avatarClass|length|href|replace|img|span|numComments|moreLinktext|hideCredits|tb|for|link|author|blogblog|gif|blogspot|gravatar|avatar|false|div|ul|feed|li|src|s1600|s220|s512|rounded|bp|png|blank||class|commHTML|hideCSS|60|40|www|mm|More|raquo|function|rcm|id|rc|break|rel|alternate|name|gd|image|b16|AaI8|1X32ZM|TxMKLVzQ5BI|AAAAAAAABYY|QYau8ov2blE|tb_blogger_logo|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|tb_openid_logo|avatarRound|alt|width|height|content|ig|substring|hellip|cb|display|none|style|float|right|font|12px|normal|Arial|afowles|2013|cara|membuat|widget|komentar|html|target|Get|Widget|document|write'.split('|'),0,{}))
document.write('<script type=\"text/javascript"\ src=\"http://afowles.blogspot.com/feeds/comments/default?alt=json&callback=rcm&max-results=5\"><\/script\>')
</script>

Semoga bermanfaat