Cara Membuat Widget Recent Comments Dengan Avatar

Widget Recent Comments Adalah Widget yang dipergunakan untuk menampilkan Komentar yang telah diterbitkan untuk bisa dilihat oleh pengunjung. Widget Adalah Widget yang wajib dipasang oleh si pemilik blog. Memang di pilihan pada tata letak untuk menambahkan widget ini belum dipasang. tetapi Widget ini bisa dipasang dengan menambahkan widget HTML. Widget ini Dibuat oleh Way2Blogging. Kelebihan dari widget ini adalah Widget Yang Stylish dari pada versi sebelumnya, Memiliki Avatar yang dibingkai bulat dibandingkan dengan versi sebelumnya yang tidak memiliki avatar, Widget ini juga bisa diatur dengan anda seberapa anda ingin menampilkan Komentar, Anda juga bisa mengatur avatar, Dan Widget ini juga mudah dipasang. Untuk Itu saya akan menjelaskan kepada anda cara untuk membuatnya. Untuk itu berikut cara untuk membuatnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Gadget HTML.
• Masukan kode berikut ini :

<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="https://daftar-javascript-kami.googlecode.com/files/Recent%20Comments.js"></script>
<script type="text/javascript" src="http://your-belajarblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<div style="text-align:center">
<span style="float:left;font:italic 10px Arial, Sans-Serif; color:#3D3D3D;"><a target="_blank" href="http://your-belajarblog.blogspot.com/2013/03/cara-membuat-widget-recent-comments.html">.:Get Widget:.</a></span>
</div>

Keterangan:

Ganti Tulisan yang berwarna Kuning dengan jumlah komentar yang ingin anda terbitkan.

Ganti Tulisan yang berwarna Hijau dengan url Gambar avatar anda (80x80 pixel).

Ganti Tulisan yang berwarna Merah dengan url blog anda.

• Lalu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG