Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog

Selamat Pagi sobat blogger, pasti masih dalam kondisi ngantuk nih,habis begadang semalem nonton final euro, saya sebagai pendukung italia, masih gak percaya nih,italia bisa kalah 4 kosong. Tapi apa boleh buat, spanyol memang tampil luar biasa semalem. Nah, dari pada pusing-pusing kepikiran terus, mending pagi-pagi langsung buka laptop, buka mbah google, dan mulai ngeblog, biar cepet lupa sama kekalahan italia semalem..hehe,,Kali ini saya akan share 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) 

Selamat Mencoba, Semoga Tips Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog ini bisa bermanfaat.



Source : blazerracing.blogspot.com

Share this post