Get paid to share your links!

Home » Widget » Membuat Recent Comment Dengan Tooltip

Membuat Recent Comment Dengan Tooltip

Yosh All...
Gwe Pikir Widget Recent Comment Yang Kalian Pakek Tuh Udah Kelamaan Yah..
Nih Gwe Ada Lagi..
Recent Comment Dengan Tooltip Versi Kirito Blog's...

Keren gak ???

Langsung Yah

Pertama Masuk Blogger
Kemudian Pilih Tata Leta > Tambah Gadget > HTML / Javascript
Pastekan Kode Dibawah Ini

<style type="text/css"> 
#komentar {background: #000; border:1px solid #006acc;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;margin:5px 0;padding:5px;} 
#komentar ul{margin:0;padding:0px;list-style: none;} 
#komentar ul li:first-child {border-top:none;} 
#komentar ul li {height:46px; background: #0e0e0e; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #006acc;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;margin:5px 0;padding:5px;} 
    
#komentar ul li:last-child {border:1px solid #006acc;} 
#komentar ul li:hover {background: #000; 
-moz-border-radius-bottomright:10px;-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;margin:5px 0;padding:5px;} 
#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 #006acc;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;background:#000;margin-top:-3px} 
#komentar ul li div.ismen {color:#888} 
#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: #fff;text-align: center;border: 4px solid #006acc;background: #000;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 #006acc;} 
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;} 
</style>
<div id="komentar">
 
<ul> 
<script type="text/javascript"> 
//<![CDATA[ 
var jmlkomentar = 5; 
var jmlkarakter = 40; 
//]]></script> 
<script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script> 
<script src="http://www.kiritoblogs.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar" type="text/javascript"></script> 
</ul>
</div>
<small></small><br /> 
<div style="font-size: 90%; text-align: right; text-shadow: 2px 2px 2px #adadad;">
 
</div>

Jangan Lupa Ganti URLnya
Simpan

Title : Membuat Recent Comment Dengan Tooltip
Description : Yosh All... Gwe Pikir Widget Recent Comment Yang Kalian Pakek Tuh Udah Kelamaan Yah.. Nih Gwe Ada Lagi.. Recent Comment Dengan Tooltip Ve...

0 Response to "Membuat Recent Comment Dengan Tooltip"

Posting Komentar

Langganan: Posting Komentar (Atom)