Cara Membuat Widget Komentar Blogspot Dengan Avatar Cara Membuat Widget Komentar Blogspot Dengan Avatar

Cara Membuat Widget Komentar Blogspot Dengan Avatar  |  Memasang Widget Recent Comment Dengan Avatar

Recent comments with avatar (image profile) seperti yang  anda lihat pada image diatas adalah widget yang sangat menarik. Widget tersebut kini menampilkan gambar avatar para komentator tentunya yang menggunakan akun google 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

Copy kode di bawah dan paste pada ruang Content HTML/Javascript (lihat 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://titanic-cyber.blogspot.com/";

var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlr1laP4HPCzmZbrBg8b6dkxH3Oc3tj8TNvo4IoTcr3OFR2hUMAUPMMyuFz1hg3m_eHMYEZYNNq303xXv5AeMLruZNM5CGBFMlEZ1ukjH-wZ8t_UFXhTammwkyrBeo0_WTjD4vKUtTGQ/s1600/Alien-smoking-icon.png";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjaTYCLxZbndWcI2q6TmO7Pa7kzKMItv1Pi8drJhZeF7CC4K1YH1bVDbfcojUClXmOjvQlcVgY1_JcnWZQ2s9NjaFyXZLgxH91VpKSA2BR-0MW-igxkuPpR96F9JSKEmVJQsjC4g1eQ/s1600/Ghost-Recon-Future-Soldier-2-icon.png";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjaTYCLxZbndWcI2q6TmO7Pa7kzKMItv1Pi8drJhZeF7CC4K1YH1bVDbfcojUClXmOjvQlcVgY1_JcnWZQ2s9NjaFyXZLgxH91VpKSA2BR-0MW-igxkuPpR96F9JSKEmVJQsjC4g1eQ/s1600/Ghost-Recon-Future-Soldier-2-icon.png";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidiLvtpn8LP85sQ4lqZnSxl_OyFNlp2s0kBvgFnxb4A6Ywhp1Z4tuwTmg7JrJaI-m2o0pb3FljQRCpXRgsVn7DxG8db5Epqd8C2rc-b1upLua-NnY_7lcidFHZJIsdDineBpFb_Mccg/s1600/monster-3-icon.png";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUTUvLtiLJ29BPOh3JAbqEZU3FMm4KlY_WoyZrhhFxaHNaM6nfz8Ox2FWk8OT5YtCYrO-IYfAtQCeqTJUOG3BFMLmYhlkHO4jqoBAo9iNgtq4nLiepjUNeMKFTorvg3Kj7GM8OzEIpQ/s1600/monster-1-icon.png";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2a_BUDvgV8VxXOZQm6cqsFcC6VrXQip5AJoYxLAmon_lSdz4slvMVupAcfoRx-MMVQyYOJjScA6GAvkyKwpT5YW_9T08LF36C3lmkevo7_8e0mC68Tyd3MaPaOcEQjdcI_lyOS-5BQ/s1600/monster-5-icon.png";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnDp0MyPgWcyx8x8hfTKC-Dpr-tULwpNazjFDSMUxbEN0Vdrmy5iGhX2oKLqNsfM9JQT1zDJKWjpSVivRkuWS614HSWyJxdgL9Nl-M49yylPpwnKP19Zhk3Fz6tiJEnsrn81QAgoJdg/s1600/monster-4-icon.png";

</script>
<script src="http://filejs-irwan.googlecode.com/files/recent-comment-avatar.js" type="text/javascript"></script>

Selanjutnya klik Save.

Jangan lupa tulisan merah ganti dengan nama domain Anda