Selasa, 26 Juni 2012

Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog


By on 20.18

Blazer Blog, Widget - Kali ini saya akan membahas bagaimana cara membuat widget recent comment dengan avatar untuk blog. Fungsi widget ini akan menampilkan komentar terbaru secara otomatis ditambah avatar, yang dimaksud avatar adalah gambar profil orang yang berkomentar.

Berikut cara membuat widget recent comment dengan avatar

1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML/JavaScript.
3. Copy kode di bawah ini. SCRIPT BY BLOGGERBUGIS


<div style="overflow:auto;width:300px;">
<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: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://blazerracing.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script>
</div>
Sekarang perhatikan baik-baik kode yang berwarna merah.

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

16 komentar:

  1. Trim tutorialnya...

    BalasHapus
  2. nice info gan...

    thanks ya

    BalasHapus
  3. sipppp

    jagan lupa mampir di http://sdnpakisindonesia.blogspot.com/

    BalasHapus
  4. Mantab gan, kebetulan recent komentar saya masih belum ada pic nya tuh. Thks ya

    BalasHapus
  5. thx sob, widgetnya langsung joss tuh :D

    BalasHapus
  6. mantap wawasan blogger kayak saya makin banyak sukses selalu

    BalasHapus
  7. Keren nih widget nya, kebetulan saya sudah pakai widget yang seperti ini! Thanks for share.. :)

    BalasHapus
  8. ilmu baru mantap gan jadinya

    BalasHapus

  9. ayo segera bergabung dengan kami di F@N5P0K3R
    mumpung lagi promo besar looo...
    dapatkan bonus free chip, bonus rollingan, dan bonus refferalnya
    ditunggu apa lagi ayo segera bergabungan dengan kami ya :* ;)

    BalasHapus