Cara Membuat Auto Tooltip Keren di Blog

Cara Membuat Auto Tooltip Keren di Blog - halo sobat, kali ini saya akan share Tooltip yang saya gunakan di blog ini,Tooltip yg saya pakai ini saya dapatkan dari Mas Noval Bintang (yg punya hack4rt.us) Tooltip ini biasanya muncul pada atribut title. scriptnya juga tidak terlalu panjang kok, jadi tidak akan memperberat blog anda, Biasanya tooltip ini tampil dengan kotak default bawaan browser, namun ternyata tooltip dapat diubah sesuai keinginan.. berikut sedikit screenshot tooltip :

Berikut tutorial cara Cara Membuat Auto Tooltip Keren di Blog :

1. Login ke akun blogger

2. Klik Template -> lalu klik EDIT HTML 

3. Lalu cari kode </body> (gunakan F3/CTRL+F pada keyboard untuk mempermudah pencarian)

4. Copy code dibawah ini dan letakan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#f5f5f5";
        t.style.border = "1px solid #ccc";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0px 1px 5px rgba(0,0,0,0.4)";
        t.style.padding = "10px";
        t.style.color = "#000";
        t.style.maxWidth = "180px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');
    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";
    }
    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }
})();
//]]>
</script>

5. Lalu klik simpan / save