Membuat Recent Comments Dengan Gambar Avatar

Posted by


Kali ini saya akan mencoba sharing tentang Recent Comments Dengan Gambar Avatar.
Recent Comments atau Komentar Terbaru ini menggunakan gambar avatar, maksudnya foto atau gambar si pengoment di blog akan terlihat fotoya, dan fotonya berbentuk gambar bundar.
Recent Comments Dengan Gambar Avatar ini tinggal sobat pasang di widget atau slidebar blog sobat, dan sobat hanya perlu menambahkan elemen HTML/Java Script di elemen gadget.


Kita langsung aja bahas canya:

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan -> Tambah gadget.

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode script di bawah ini dan letakkan di dalamnya.

<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  = 5,
showAvatar  = true,
avatarSize  = 60,
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://www.syafiqnfsmw.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=7"></script>

5. Simpan.

Keterangan:
Ganti http://www.syafiqnfsmw.blogspot.com dengan url blog sobat.
numComments  = 5, -> Angka 5 menunjukkan jumlah komentar terbaru yang akan di tampilkan.
Kode di atas masih ada yang bisa di rubah, silahkan sobat ganti sendiri.

Semoga bermanfaat Sobat ...



Blog, Updated at: 09:44

0 Comment :

Post a Comment

Ayo Sobat jangan jadi SILENT READER ya, ? bagi dong komentarnya
jika Sobat tidak punya akun silahkan pilih Anonymous...
Dan gunakan kata-kata yang sopan ....

Search This Blog

Popular Posts