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:

  • Pengertian: Perbedaan Web Statis dan Web Dinamis Pengertian: Perbedaan Web Statis dan Web Dinamis » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Web berdasarkan teknologinya terbagi menjadi dua, … Read More
  • Membuat Tombol Follow Twitter di BlogMembuat Tombol Follow Twitter di Blog » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Nah bagi Anda yang sangat eksis sekali dengan dunia maya dan ingin … Read More
  • Tips Meningkatkan Page view BlogTips Meningkatkan Page view Blog » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Page view merupakan jumlah tampilah halaman yang diakses oleh visitor a… Read More
  • Pengertian WebsitePengertian Website » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Pengertian Website: Apa itu Website? Website (situs web) atau bisa juga disebut Web a… Read More
  • Membuat Floating Social Bookmark Melayang dengan Efek EasingMembuat Floating Social Bookmark Melayang dengan Efek Easing » The FIM Site kali ini akan sedikit berbagi info dari kami yang disponsori oleh MASFIM.com | Portal Informasi Terkini. Hallo teman-teman semua sudah lama juga saya… Read More