Amungra Blog

Widget Recent Komen dengan Avatar

Widget Recent Komen dengan Avatar - Setiap blogger menginginkan tampilan blog yang menarik dan secantik mungkin. Selain merupakan sebuah kebanggan tersendiri, blog yang menarik juga merupakan salah satu cara untuk membuat pengunjung lebih betah dan senang berkunjung ke blog.

Cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Widget Recent Komen dengan Avatar.

Widget Recent Komen dengan Avatar adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Widget Recent Komen dengan Avatar ini lebih menarik di bandingkan Recent Comments biasa yang tidak menampilkan avatar profil komentator.

Langkah-Langkah Membuat Widget Recent Komen dengan Avatar


1. Masuk ke account Blogger sobat
2. Klik Layout/ Tata Letak
3. Klik Add a Gadget/Tambahkan element Baru
4. Tambahkan HTML/JavaScript berikut!

/* ------------------http://tpb-pn.net--------------------- */

<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 = 30,

roundAvatar = true,

characters = 30,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://indolaron-js.googlecode.com/svn/trunk/Recent_Comments_With_Avatar.js"></script>

<script type="text/javascript" src="http://www.tpb-pn.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Ganti http://www.tpb-pn.net/ Menjadi URL Blog Anda
6. SIMPAN


Keterangan:
numComments = 5 : Jumlah komentar yang ingin ditampilkan
avatarSize = 30 : Ukuran avatar atau gambar profil
characters = 30 : Jumlah kata pada komentar yang ingin ditampilkan.

Semoga Bermanfaat :)