Buat widget recent comment dengan tooltip - keren!

Tags : Membuat widget recent comment dengan tooltip Keren!   Membuat widget recent comment widget recent comment membuat widget komentar terbaru di blog keren

   Selamat malam sobat Blogger sekalian! Posting kali ini, saya akan membahas tentang Cara membuat recent comments dengan tooltip. Screenshoot nya seperti ini :

 Gimana gan? Keren kan? Tooltip pada widget tersebut, berguna untuk menampilkan nama pengunjung yang berkomentar. Ok, Cekidot!!

1. Login blog -> Tata letak.
2. Add Gadget -> HTML/Javascript.
3. Copas kode ini :

<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 = 7;

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

</ul></div>

4. Save.

Keterangan,,.............
a). Kode berwarna orange adalah kode warna background widget.
b). Kode berwarna merah dan kuning, menentukan jumblah karakter dan jumblah komentar yang akan ditampilkan pada widget.
c). Ganti http://infoiki.blogspot.com dengan link blog anda.