Cara Membuat Widget Comment Box Keren di blog

Kali ini saya akan menulis posting tentang cara membuat comment box di blog. Widget yang saya akan share ini sama persis seperti yang ada di blog ini.

Widget comment blog ini sangatlah bagus karena memiliki thumbnail dari foto pengunjung yang berkomentar di sebuah postingan. Cara membuat widget komentar di blogger ini sangatlah mudah.

Menurut saya manfaat dari widget recent comment ini adalah menarik pengunjung untuk ikut membaca artikel lain.

Widget comment ini terbukti cepat dalam load.

gambar disamping merupakan contohnya, dan untuk contoh real, anda bisa lihat di bagian kanan sidebar blog ini.

Cara membuat widget komentar di blog

1) Masuk Blogger.com

2) Pilih tata letak / layout

tentukan dimana widget recent comment akan dipasang, misal di sidebar

kemudian pilih html.

3) copykan script berikut

 <style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_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;}    .latest_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;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}


    .latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/43012082112/truebloggertricks.txt.js"></script><script src="http://zenhuzaini.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

4) Simpan 

Keterangan :

Ubah yang di Bold

Merah menjadi alamat situs anda,

Biru sesuai banyaknya komentar muncul

Demikian tutorial membuat widget komentar di blog . Mudah mudahan berhasil digunakan pada blog anda.