Memasang Widget Recent Comment Dengan Tooltip


Recent comment adalah sebuah widget yang berfungsi untuk menampilkan semua/beberapa komentar yang ada di blog sobat, kali ini saya akan memberi tau cara membuat recent comment yang menarik untuk semua jenis niche blog.

Tahap-tahap pemasangan

1. Login Blog -> Tata letak.
2. Add Gadget -> HTML/Javascript.
3. Copy Kode Di Bawah 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://lubangpengetahuan.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul></div>
    Ganti  a). Kode berwarna orange adalah kode warna background widget.
              b). Kode berwarna Merah, menentukan jumblah karakter dan jumblah 
                   komentar yang akan ditampilkan pada widget.
              c). Ganti http://lubangpengetahuan.blogspot.com dengan link blog anda.



Previous
Next Post »

9 komentar

Click here for komentar
Frank Ploes
admin
October 10, 2014 at 6:54 PM

Wah Blogging ya? mantap deh nanti ane coba

Reply
avatar
October 11, 2014 at 2:17 AM

tq gan infonya :D
lumayan lah

Reply
avatar
October 11, 2014 at 5:42 AM

ijin coba gan,makasih banget nih hihi

Reply
avatar
October 16, 2014 at 6:37 PM

wah lumayan nih buat blog ane yang masih polos

Reply
avatar
October 18, 2014 at 11:24 PM

semoga itu membuat anda puas

Reply
avatar
October 26, 2014 at 12:13 AM

Wah kayanya keren nih.. ane coba dlu deh.. makasih ya bro..

Reply
avatar
Thanks for your comment