DUNIA 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
Keterangan :<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>
- 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>
#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:
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.
Anda baru saja membaca artikel yang berkategori tips-trik
dengan judul MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE). Anda bisa bookmark halaman ini dengan URL http://duniablog888.blogspot.com/2013/07/membuat-widget-recent-comment-plus.html. Terima kasih!
Ditulis oleh:
Unknown -
nice postingnya om...
BalasHapuskunjungan balik dari saya
http://ditha-nakeh.blogspot.com/
Widget Recent Comment plus avatar ini dapat membantu kita mengetahui komentar-komentar yang masuk.
BalasHapusSalam blogger.
trims mas sudah sy coba dan sukses namun tidak ada tombol balas dan hapus ... seperti punya mas .. mhn pencerahannya trims.
BalasHapus