Cara Pasang Recent Comment With Avatar Plus Tooltip

Hallo sobat NB.... mau posting lg nih, kali ini saya mau share Cara Pasang Recent Comment With Avatar Plus Tooltip. Baiklah langsung saja, jika sobat NB mengenai Tutorial ini, sobat bisa lihat contohnya ko, tuh di bawah :

 Contoh

Contoh

Contoh

Contoh

Contoh

Contoh


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

1. Login ke akun Blogger sobat.
2. Klik Perancangan ==> Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Selanjutnya masukan kode di bawah ini :
   
   <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://zatrock52.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul></div>
6. Lalu Klik Simpan. dan lihat hasilnya....

Catatan : Teks yang saya kasih tanda warna HIJAU, tinggal sobat ganti dengan nama Blog sobat

o.. iya saya lupa kasih tau, Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti, Slamat mencoba ^_^