Kamis, 16 Februari 2012

Cara Membuat Recent Comments Dengan Avatar








diatas merupakan contoh recent comments yang kali ini ingin kita buat..

Bagaimana apa sobat tertarik unutk membuatnya? Langsung saja kita ikuti tutorial beikrut ini

1.    Login ke Blogger

2.    Pilih tab Design > Add a Gadget > Html/ JavaScript

3.    Copy kode di bawahj ini dan pastekan ke dalam gadget sobat




<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;border:3px solid #BDBDBD; -webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc}
.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 = 3,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
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="urlblogsobat/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

4.    Ganti tulisan urlblogsobat dengan url blog sobat

5.    Ganti numComments = 3, (jumlah komentar yang ditampilkan)

6.    Ganti avatarSize = 30, (ukuran avatar dalam pixel)

7.     Setelah selesai simpan gadget sobat dan lihat hasilnya

Selamat mencoba, semoga berhasil dan bermanfaat


0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...