MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE)

Dunia Blog 888DUNIA BLOG 888 kali ini ingin berbagi tutorial tips-trik tentang membuat Widgett Recent Comment plus avatar (profile komentator) yang dapat dipasangkan pada bagian sidebar atau footer sebuah blog. Widget ini cukup sederhana dan secara umum tidak terlalu membebani proses loading sebuah blog, karena disusun dari kombinasi script yang biasa.

Pada kesempatan ini akan saya tampilkan beberapa metode untuk membuat Widget Recent Comment ini, namun sebelumnya sedikit saya berikan ulasan tentang fungsi atau kegunaan widget ini yaitu, widget ini (sesuai dengan fungsinya) akan menampilkan ringkasan komentar-komentar yang ditinggalkan oleh beberapa pengunjung pada blog yang kita miliki dapat meningkatkan intensitas komunikasi dua arah antara visitor dengan admin blog, disamping hal itu, dengan memasang widget ini akan membantu kita untuk memonitor komentar-komentar pengunjung yang berbau spam sekaligus akan membantu dalam upaya kita untuk membantu pendeteksian broken link yang diakibatkan oleh komentar-komentar pengunjung. Lebih jauh lagi dengan pemakaian widget ini kita harapkan prosentase bounce rate blog kita akan berkurang, karena bilamana ada seorang visitor yang kebetulan tertarik dengan salah satu komentar yang masuk, kemudian ia meng-klik komentar tersebut, maka secara otomatis visitor tersebut akan masuk ke artikel atau postingan kita yang (mungkin) berbeda dengan artikel yang sedang dibacanya.

Berikut ini cara membuat widget recent comment plus avatar tersebut  :

Cara umum : Masuk atau login ke blog anda, pilih Dasboard, pilih Layout, Add Gadget dan pilihlah HTML/Javascript. Selanjutnya masukkan rangkaian kode (script) berikut ini di dalamnya.

POLA PERTAMA 

<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 = 5;
var cm_desc = 13;
var homepage = "http://duniablog888.blogspot.com/";
</script>
</script>
<script src="http://youdhie.googlecode.com/files/Recent%20Comment%20Thumbnail.js " type="text/javascript"></script>  
Keterangan : 
  • Angka 5 adalah jumlah comentar yang akan di tampilkan
  • Angka 13 adalah jumlah banyaknya kata dalam suatu komentaryang akan ditampilkan
  • duniablog888.blogspot.com  ganti dengan nama blog/website anda!

POLA KEDUA

<style type="text/css">
#recentcomment {
width:98%;
margin-left:0px;
}
img.recentcomment-avatar {
background:#009ECE;
float:right;
padding:5px;
margin:0px -2px 0px 0px;
height:30px;
width:30px;
border:solid #009ECE 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 0px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
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;
background: #BDE5F8;
padding:4px;
border:1px solid #009ECE;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
</style>
<script src="http://youdhie.googlecode.com/files/ComThumb2.js" type="text/javascript">
</script>

Bilamana rangkaian script di atas tidak dapat berfungsi pada template blog anda, maka saya sarankan anda menggantinya dengan rangkaian script yang saya pergunakan pada blog ini sebagai berikut   :

Kode Script:
<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  = 10,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "http://2.bp.blogspot.com/-6pCCeOe7wKA/UKRn7f0MK7I/AAAAAAAAB3s/oWt1dVVzc5Y/s1600/gravatar.jpg",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Bams Skc';
//]]>
</script>
<script type="text/javascript" src="http://www.geocities.ws/reggy1998/rcomment.js"></script>
<script type="text/javascript" src="http://duniablog888.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>



Gantilah tulisan yang tercetak tebal dengan alamat url blog anda, semoga berhasil.


MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE) 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE)' On ...

Ditulis oleh: Bams Skc -

3 komentar untuk "MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE)"

  1. nice postingnya om...
    kunjungan balik dari saya
    http://ditha-nakeh.blogspot.com/

    BalasHapus
  2. Widget Recent Comment plus avatar ini dapat membantu kita mengetahui komentar-komentar yang masuk.
    Salam blogger.

    BalasHapus
  3. trims mas sudah sy coba dan sukses namun tidak ada tombol balas dan hapus ... seperti punya mas .. mhn pencerahannya trims.

    BalasHapus

Silahkan meninggalkan komentar secara sopan, jangan melakukan spam pasti akan terhapus secara otomatis