- loggin blogger
- rancangan,edit html,
- cari kode </head> lalu copy kode berikut dan letakkan diatasnya
<style>
#tooltip{width:150px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#000000;-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:#FF3333;border:1px dashed #FF3333;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>
#tooltip{width:150px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#000000;-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:#FF3333;border:1px dashed #FF3333;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>
Ganti yang warna merah sesuai keinginan !!!
Demikian artikel tentang Cara Membuat Balon Tooltip Otomatis Ke semua Title Di Blog ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Balon Tooltip Otomatis Ke semua Title Di Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
