Cara Pertama:
- Login Ke Akun Blogger sobat
- Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
- Copas KOde Berikut Tepat Diatas KOde </head>
kode:
<style>#tooltip{width:200px;text-transform:capitalize;z-index:
10000000;position:absolute;background:#444;-moz-border-radius:5px;-webkit-border-radius:
5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s
ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s
ease-out;padding:2px 5px;font-size:12px;color:#000;border:1px dashed
#ff0000;display:none;font-weight:bold}</style>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>
simpan.
Cara Kedua:
- Login Ke Akun Blogger sobat
- Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
- Copas KOde Berikut Tepat Dibawah KOde <body>
kode:
<script
src="http://javascript-share.googlecode.com/files/wb.js"></script><a
id='wb_ttauth' href='http://www.warungbebas.com'>Warung
Internet</a><script type="text/javascript">//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><div id="warungbebasautotooltip">
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><div id="warungbebasautotooltip">
selanjutnya cari kode </body>
taruh kode di bawah ini tepat di atas nya
kode:
</div><script
type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>
simpan .
dan lihat hasilnya .. sekian artikel tentang cara buat tooltip melayang
Artikel Terkait... Crew-LP |^_^|
Artikel 
0 Comments
Bagaimana Pendapat Anda ?