Cara Membuat Comment Box dengan Avatar

Pada kesempatan kali ini Bang Dayat akan share Cara Membuat Comment Box dengan Avatar, setelah sebelumnya saya telah share Cara Membuat Scroll Bar pada Widget, tutorial ini sudah tidak asing lagi bagi para blogger karena sebagai pemberitahu kalau ada komentar baru dari pengunjung, dan kali ini saya akan share cara membuat comment box dengan avatar sang pemberi komentar di samping komentarnya. Yuk mari simak tutorial berikut ini.

• Login dahulu ke blogger.
• Rancangan - Edit laman.
• Tambah gadget – Java script HTML
• Lalu copy dan pastekan kode berikut ini di dalam kolom HTML anda.

<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  = 10,

                showAvatar       = true,

                avatarSize          = 50,

                roundAvatar      = true,

                characters           = 40,

                showMorelink  = false,

                moreLinktext     = "More »",

                defaultAvatar   = "http://www.gravatar.com/avatar/?d=mm",

                hideCredits         = true;

//]]>

</script>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>

<script type="text/javascript" src="http://anakgilaonline.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Keterangan :

• Warna Biru ganti dengan link blog anda. 

• Warna Merah adalah banyaknya jumlah komentar yang akan ditampilkan (*Max 10)

• Kemudian simpan dan lihat hasilnya.

Sekian tutorial tentang Cara Membuat Comment Box dengan Avatar yang dapat Bang Dayat share, Semoga bermanfaat buat kawan-kawan semua. Salam Bang Dayat.