Pasang Recent Comment Dengan Gambar Profil Dan Avatar

Ini adalah posting ke 2 mengenai recent comment. Dengan tampilan yang lebih menarik dan pemasangan yang lebih mudah, anda boleh tertarik dengan widget yang satu ini; Recent comment yang disertai dengan gambar profil serta gambar avatar pada komentar yang tidak menyertai gambar profilnya.

Seperti pada posting pertama, widget recent comment ini juga mempunyai fungsi yang sama yaitu untuk mempermudah admin blog dalam melakukan moderasi terutama yang tidak menyertakan persetujuan dalam menampilkan komentar.

Untuk memasangnya, copy paste kode berikut pada elemen HTML/JavaScript dan tempatkan di tempat yang anda kehendaki:

<style type="text/css">
#recentcomment {
width:98%;
margin-left:5px;
}
img.recentcomment-avatar {
background:#fff;
float:right;
padding:2px;
margin:2px -2px 0px 0px;
height:30px;
width:30px;
border:solid #ddd 1px;
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
font-family: 'trebuchet ms';
font-size:1.00em!important;
color:#2C2929;
text-decoration:none;
}
div.recentcomment-content{
font-size:1.00em!important;
text-decoration:none;
line-height:1.45em;
letter-spacing:0.03em;
background: #fff;
padding:4px;
border:1px solid #ddd;
}
</style><script type="text/javascript">
ava_mode = "all";
var cm_num = 6;
var cm_desc = 13;
var homepage = "http://urlBlog.com/";
</script>

<script src="http://youdhie.googlecode.com/files/Recent%20Comment%20Thumbnail.js " type="text/javascript"></script>

Keterangan :

• Angka 6 adalah jumlah comentar yang akan di tampilkan
• ANgka 13 adalah jumlah banyaknya kata yang akan ditampilkan
• Ganti urlBlog dengan alamat blog anda!

Masih ada 1 lagi variasi recent comment yang mungkin anda tertarik. Berikut kodenya:

<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  = 33,
 roundAvatar = true,
 characters  = 35,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9SOCktW_iitkhCOM23ZonXRtRSztNbSmYUREHCukyz07ruxzVvnbTGXOMeIhUwK7AyLLlt5GhO6hYEt2jqYXax9ksIh90sH63dtbzYrL4iUFXGEm50CNP3Udn62dtf5dqJJ920aaR9Q/s1600/komentar.png",
 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://urlBlog.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>

Keterangan :

• Angka 6 adalah jumlah komentar yang akan di tampilkan
• Agka 33 adalah jumlah karakter yang akan ditampilkan
• Ganti urlBlog dengan alamat blog anda!

Code: http://www.youshie.com