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  = "http://1.bp.blogspot.com/-PJnn63YTA0c/Ty1yWr_tw3I/AAAAAAAAB5Q/RNqh9PLSPaE/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
Untuk berlangganan artikel, masukan email anda disini:



2 Comment :

Kando mengatakan...

keren-keren, desain template sampai widgetnya keren,,
salut.. simple tapi istimewa
tidak seperti template saya hehehe

Jon Milan's mengatakan...

Trima kasih sob, sama2 belajar...

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry