Cara pasang widget Recent comments dengan avatar (image profile) di Blogspot

Recent comments with avatar (image profile) seperti yang boleh anda lihat pada sidebar blog saya adalah widget yang sangat menarik. Widget tersebut kini memaparkan gambar avatar pemberi komen beserta dengan komen ringkas pada post yang berkaitan dalam Blogger.

Untuk memasang widget recent comment dengan avatar ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1).

<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;
-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-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;
-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 type="text/javascript">
ava_mode = "all";
var cm_num = 5;
var cm_desc = 13;
var homepage = "http://maribinablog.blogspot.com/";

var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNi-GSG24aKuBoAjdbsQs8cchj0XnukJ6VNWCKXL8jvUT47Vd7a27wCEtM5I_Cw_NTGFrXKNPXvNKDwyw5Jp1KEN1dJEMudGSwtTAif7_Hh2eZQPwbw4fo5fDmEoHUp0QOtkMsn3qNavL_/s1600/user.png";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDceLgdqr5Llqd4YlmKOko7zaZ6YGeOrMqk3Z0PfvW5tLLZe26_baeBhMxhJXFN_9HNGYSjD-pHbKdoEYdiuP0WXgeZAUwLaauDoqGPf6ZXib9252-L9qURszqCWaR5iobz78hMA2iAtc/s1600/anonymous.png";

</script>
<script src="http://javscript-code.googlecode.com/files/recent-comment-avt.js" type="text/javascript"></script>

Akhir sekali, klik Save.

p/s: Jika kod yang telah di save tidak berfungsi, sila gunakan kod ini (sila klik)