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 Jasriman Sukri, Published at 13.31 and have 12 komentar

12 komentar:

  1. tutorial baguz gan .,., kunjungan pertama nih .,. kunjungi balik yahh .,. http://www.archer.biz
    terimakasih :)

    BalasHapus
  2. boleh dicoba tuh mas bro......

    BalasHapus
  3. @Made Budi Coba aja mas bro

    @[./Yoga Cyber4rt™] hehe makasih

    BalasHapus
  4. thanks atas tutornya mas :D
    makin bagus jadinya tampilan blog saya..
    hehe..

    BalasHapus
  5. . . ijin nyoba ach,, ntar kalo bagus ya ijin pake skalian. he..86x . .

    BalasHapus
  6. makasih mas admin infonya..kalau anda berkenan mampir ya ke blog k..sambil silaturahmi

    BalasHapus