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.


Related Posts:

  • Membuat Breadcrumb BlogKali ini saya akan berbagi tips cara membuat breadcrumb..Breadcrumb sendiri bertujuan untuk mempermudah bagi pembaca blog kita terutama bagi mereka yang sering berkunjung di blog kita.. ok langsung ke TKP nya..Loggin blogRanc… Read More
  • Memperbaiki Eror HTML BloggerBanyak diantara kita masih sangat kurang memperhatikan eror dari HTML Blogger. Hal inilah yang sedikit membuat load blogger kita akan sedikit terhambat. Kali saya akan berbagi tips mengurangi eror HTML blogger yang cukup fare… Read More
  • Menyembunyikan KomentarKali ini saya akan berbagi tips untuk menyembunyikan komentar pada artikel agar para pembaca artikel tidak bisa berkomentar ke isi artikel.. Cukup sedikit jahat juga tetapi tak mengapa. Ok langsung ke TKP !!Berikut langkah-la… Read More
  • Cara Membuat Fungsi Scrool Pada Komentar Pada BlogPada Postingan kali ini saya akan membahas tentang Cara Membuat Fungsi Scrool Pada Komentar Pada Blog berguna untuk memperpendek kotak komentar, sangat diperlukan, dalam rangka menghemat ruang template anda agar tidak terla… Read More
  • Membuat Menu Select All pada Artikel Isikan kode disini Diatas terdapat menu select all yang merupakan kode yang bisa dimanfaatkan untuk seseorang yang akan memudah artikel kita jika anda ingin menggunakan fasilitas tersebut. Berikut adalah cara-caranya:Loggin… Read More