» » Cara Membuat Balon Tooltip Otomatis Ke semua Title Yg Ada Di Blog

Cara Membuat Balon Tooltip Otomatis Ke semua Title Yg Ada Di Blog

tutorial ane yang kemaren adalah mendisable fungsi keyboard pada blog kali ni ane mau kasi tau cara bikin balon tooltip otomatis ke semua title yang ada di blog langsung aja ke proses pembuatannya:


  • 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:#ffffff;-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;
$(&quot;a[title]&quot;).hover(function(e){    
this.t = this.title;
this.title = &quot;&quot;;  
$(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;)
.fadeIn(&quot;fast&quot;);
},
function(){
this.title = this.t;
$(&quot;#tooltip&quot;).remove();
});
$(&quot;a[title]&quot;).mousemove(function(e){
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;);
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>


  • Simpan template kalian , dan lihat hasilnya

Semoga bermanfaat 

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 13.31 and have 11 komentar

11 komentar: