Cara Membuat Recent Comment Dengan Avatar

Widget Recent Comment dengan Avatar -- Atau sering juga disebut dengan komentar terbaru dengan icon atau gambar profil komentator memang terkadang ada juga kegunaannya, contohnya saat kita membuka blog kita tentunya kita dapat melihat komentar terbaru yang ada tanpa membuka blogger/home.Mungkin sobat menginginkan widget Recent Comment yang seperti ini :

recent comment dengan avatar

Untuk Membuat Komentar Terbaru Dengan Icon Avatar, ikuti langkah berikut :


1. Masuk ke Blogger
2. Masuk ke Edit Tata Letak ( Layout )
3. Tambahkan widget HTML/JavaScript
4. Copy Paste Kode Berikut :

<div style=" overflow:auto; text-align: left; 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: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 6,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]></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://eko-tipsntrick.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>
</div>

NB :
Perhatikan kode warna Biru !
6 adalah jumlah komentar yang tampil
30 adalah besar image avatar
40 adalah jumlah maksimal karakter
eko-tipsntrick.blogspot.com ganti dengan URL alamat Blog sobat.
Sobat bisa ganti sendiri sesuai dengan selera.
Simpan dan lihat hasilnya.

Sumber : http://warehouse1994.blogspot.com/

2 comments

woooowww kebtulan nih gan lagi belajar gan ane,,thank's ya gan sudah berbagi,,,

Reply

iya gan kunjungi terus aja

Reply

Post a Comment

W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.

Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.

Terima kasih untuk kunjungannya.