Cara Membuat Komentar Dengan Avatar Blogger

Beginilah Cara Membuat  Komentar  Dengan Avatar Blogger hanya dengan memasang kode html berikut kedalam gadget Text/Html maka tampilan widget recent komentar blogspot anda akan lebih menarik tiada tandingannya.Sebelumnya saya sudah menuliskan juga tentang Cara Membuat Widget Komentar Blogspot Dengan Avatar Namun ada embel-embel Widgetnya.

Nah seiring perkembangan Zaman dan Teknologi semakin canggih maka dikembangkan lagi dengan gaya widget recent komentar yang lebih elegan yang scriptnya saya gak sengajka tertarik dengan recent komentar di kumpulancara.com dan kode saya lihat di page source nya

Oke tanpa basa-basi mari kita ikuti caranya :
Langkah 1

Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Copy kode di bawah dan paste pada kolom Content  HTML/Javascript Beri judul terserah anda mau Recent Comment Atau komentar Terbaru..

<div class='widget-content'> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments 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;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments 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 = 6, showAvatar = true, avatarSize = 40, roundAvatar = true, characters = 30, showMorelink = false, moreLinktext = "More &#187;", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = false; //]]> </script> <script style="text/javascript" src="http://kc-kumpulancara.googlecode.com/files/recentcomment.js"></script></div><script type="text/javascript" src="http://dangstars.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='http://www.blogger.com/rearrange?blogID=5699994448554908071&widgetType=HTML&widgetId=HTML2&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("html2"));' target='configHTML2' title='Edit'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script> <script type='text/javascript' src='http://javscript-code.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0'></script> <script type="text/javascript"> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAf4msDK62Ell473NTZrc2ixUEhyLWUJFA9ox_1yAfu5Bay8r73T6stOEfIlOonZBHQMykfqx_Ue56fyiZB_eDepfclZYFQEJDYXqUJL8zkFtI4IHyqNmdIu8LjJYHOyNo46nFLF1rEFo/s1600/grey.gif" }); }); </script>

Keterangan :
Warna  = Pengaturan lebar widget Otomatis  mengikuti lebar widget pada template
Warna  = Pengaturan jumlah yang akan ditampilkan,untuk avatar tergantung selera
Warna  = Ganti dengan Id blogger Anda dan nama blog Anda
Warna  =  False artinya disembunyikan dan True artinya ditampilkan 
Warna  = Adalah Script Lazy Load berguna untuk mengkompress Widget tersebut agar meringankan loading
Setelah memasukan kode tersebut jangan lupa di save.