Jquery Tooltip

1.Loggin keblogger anda masing-masing
2.Kemudian masuk pada rancangan
3.Pilih Edit HTML kemudian centang Expand Template Widget
4.Cari kode ]]></b:skin> lalu pastekan kode dibawah ini

klik :

/* BALON */
#balon a {
color:#fff;
text-shadow:0 0 1px #fff;
}
#balon span {
width: 245px;
height:auto;
z-index:60;
background: -moz-linear-gradient(top, #999, #252525, #999);
position:absolute;
padding: 3px;
left:35%;
text-align: center;
text-decoration:none;
display: none;
line-height:90px;
font-size:30px;
color:#bbb;
text-shadow: 1px 1px 2px #000;
border:1px solid #111;
-moz-border-radius:20px;
-moz-box-shadow: 0px 10px 20px #000
}

5.Sekarang cari </head> kemudian pastekan kode di bawah ini

klik :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#balon li").hover(
function(){
$(this).find("span").attr({
"style": 'display:block'
});
$(this).find("span").animate({opacity:0.9,top: "200px"}, {queue:false, duration:400});
},
function(){
$(this).find("span").animate({opacity:0,top: "-9999px"}, {queue:false, duration:1000}, "linear",
function(){
$(this).find("span").attr({"style": 'display:none'});
}
);
});
});
</script>

6.Lalu untuk pemanggilannya sobat bisa lakukan dengan di edit-html/tambah gadged

klik :

<ul id="balon">
<li><a href="#">Home<span>START PAGES</span> </a></li>
<li><a href="#">About<span>WHO I AM</span> </a></li>
<li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>
</ul>
</div>

7.Contohnya dapat anda Lihat

Disini

Terimakasih telah berkunjung ke : http://black-market7.blogspot.com

.: Artikel Terkait :.