Cara Pasang Recent Comment With Avatar Plus Tooltip

Setelah lama gak posting tutorial blog, akhirnya utta kembali lagi untuk memberikan tips "Cara Pasang Recent Comment With Avatar Plus Tooltip" dimana Pada postingan saya sebelumnya pernah juga membahas "Cara Membuat Recent Comments Plus Image" dan "Cara Membuat Recent Comments With Marquee",..

Baiklah Langsung saja, jika sobat masih penasaran mengenai tutorial ini, sobat bisa lihat Contohnya dibawah ini :

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<script type='text/javascript' src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<style type='text/css'>
/* Beauty Recent UWI Comments */
#komentar {margin:0;padding:0;background:transparent;box-shadow:0px 1px 3px #000;box-shadow:inset 0px 0px 5px #000;
border: 2px solid rgba(255, 255, 255, 0.03);}
#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 rgba(255, 255, 255, 0.03);border-top:1px solid rgba(255, 255, 255, 0.03);padding:2px 0;list-style:none;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background-color:#222;}
#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 rgba(255, 255, 255, 0.03);}
#komentar .ismen {display: block;font-size: 1.2em;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: #fff;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid white;background:darkred;text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 450px;opacity: 0;box-shadow: 0px 0px 4px red;-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 white;}
#komentar .gamen:hover>span{opacity: 0.9;bottom:50px}
  </style>
<script type='text/javascript'>//<![CDATA[
var jmlkomentar = 10;
var jmlkarakter = 100;
//]]>
</script>
<div id='komentar'>
<ul><script type="text/javascript" src="http://ngawicybers.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul>
</div>

5. Klik Simpan. Lihat hasilnya.

NB :: - Teks yang berwarna merah, anda ganti dengan Nama Blog anda.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.

Selamat mencoba.!