Membuat Recent Comment JSON dengan Avatar

Inilah yang ditunggu-tunggu blog trik dan tips, akhirnya ditemukan juga membuat recent comment dengan avatar". Trik ini dibuat oleh Blogger Tune Up, dengan judul Percantik Sidebar Komentar Versi 2.0 atau judul bahasa inggrisnya Beauty Recent JSON Comments Sidebar 2.0. Widget ini mampu menampilkan avatar dari pengujung yang meninggalkan komentar. Selain itu akan muncul tooltip cantik ketika mouse diarahkan diatas, tool tip itu berisi nama komentator. Animasi tool tip ini sangat menarik jika dilihat oleh pengunjung blog anda. Jika Ingin memasangnya cukup mudah tinggal mengikuti langkah berikut:

1. Masuk ke Rancangan --> Elemen Halaman
2. Tambahkan gadjet lalu pilih HTML/JavaScript
3. Kopi dan masukan kode dibawah ini pada gadjet tadi

<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://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Keterangan:
- blogtrikdantips.blogspot.com ubah sesuai dengan alamat blog anda.
- var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar.
- var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter.

4. Simpan gadjet anda

Jika Anda ingin membuat Recent Comment Jason tersebut Tanpa Style (warna disesuaikan dengan background template anda) maka kopi kode dibawah ini lalu masukan keterangan seperti diatas:

<style type="text/css">
#komentar {
margin:0;
padding:0;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li {
height:46px;
margin:0 !important;
padding:4px 0 !important;
display:block;
clear:both;
list-style:none;
}
#komentar ul li:last-child {
border-bottom:none;
}
#komentar ul li:hover {
background-color:#ccc;
}
#komentar a, #komentar a:link, #komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
text-shadow:0 1px 0 #ccc;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #fefefe;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow:0 1px 2px #222;
-moz-box-shadow:0 1px 2px #222;
box-shadow:0 1px 2px #222;
}
#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 #ccc;
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 #ccc;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
#komentar .ismen {
display: block;
font-size: 1em;
line-height: 1.2;
padding: 2px 4px 2px 0;
}
</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://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Selamat mencobanya!