Cara Membuat Widget Komentar Dengan Avatar Pada Sidebar

Dibawah ini langkah-langkah pemasangan widget komentar dengan avatar pada sidebar. Cara ini saya ambil dari blog temen  http://modification-blog.blogspot.com, dan sudah saya coba diblog ini, lihat gambar dibawah ini sebagai contohnya:

Berikut langkah-langkahnya:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambah Widget/Gadget baru dengan type "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten":



-------------------------------------------------------------------------------------------------------------

<style type="text/css">
#komentar {
background:#3eb5da;
margin:0;
padding:0;
border:1px solid #0971C8;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li:first-child {
border-top:none;
}
#komentar ul li {
height:46px;
border-bottom:1px solid #0971C8;
border-top:1px solid #CCCCCC;
padding:2px 0;
list-style:none;
}
#komentar ul li:last-child {
border-bottom: none;
}
#komentar ul li:hover {
background-color:#7BC4DF;
}
#komentar a,
#komentar a:link,
#komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #ffffff;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
color:#ffffff;
text-shadow:-1px -1px 1px #0971C8;
}
#komentar .ismen {
display: block;
font-size: 1em;
font-style: italic;line-height: 1.2;
padding: 2px 4px 2px 0;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #0971C8;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #0971C8;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://kucobaberbagi.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>
---------------------------------------------------------------------

Perhatian :

Ubahlah alamat blog (http://kucobaberbagi.blogspot.com/) sesuai dengan alamat blog anda.
var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang akan ditampilkan.
var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter yang akan ditampilkan (termasuk spasi).Langkah 5
Simpan Widget dan preview blog anda...

Selamat mencoba!