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


Suka artikel ini ?

About Unknown

Admin Blog

27 komentar

Click here for komentar
Terima Kasih Sudah Berkomentar
Anonymous
June 30, 2013 at 10:52 PM

makasih tutornya sob, tentang cara membuat auto tooltip keren di blog.
kpingin make jg kyknya..
tp sblmny, ada ga keuntungannya sob ?
balas ya sob, pengen tau lebih jauh tentang tooltip nih :p
-keep blogging-

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 12:01 AM

mantep nih tutornya sob , dicoba dulu yah "Cara Membuat Auto Tooltip Keren di BLog" thanks

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 12:37 AM

ada sob, mungkin hanya untuk memperjelas tooltip agar lebih enak dipandang mata ;D

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 1:11 AM

informasi yg bermanfaat sob..lanjutkan!

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 1:13 AM

Wah keren.. Insya Allah nanti dicoba mas.. Terima kasih ya share nya ^_^

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 2:09 AM

silahkan dicoba :D

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 2:09 AM

thanks sob..

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 2:23 AM

Wihh Keren bgt !! Mau langsung Buka Bloger terus pasang :)

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 2:51 AM

oke sama sama gan :D

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 2:52 AM

ayo cepet pasang di blognya :D

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 4:33 AM

Gan, ini fungsinya buat apa?!

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 4:58 AM

Nice Tips nya gan
izin nyobak

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 5:24 AM

baru tahu kalo ada kayak ginian, thx mastah dah share

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 8:25 AM

Ane coba dulu nih gan

Komen balik yah gan www.kevin-432.blogspot.com

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 9:16 AM

Wah keren nih, coba ah..
:D

Balas
Terima Kasih Sudah Berkomentar
Anonymous
July 1, 2013 at 9:54 AM

keren gan tapi masih kurang menarik style nya?

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 9:54 AM

mungkin hanya untuk mempercantik blog dan membuat tooltip default lebih jelas :/

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 10:15 AM

saya masih kurang mengerti apa itu auto tooltip dan kegunaannya gmn sob??

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 11:55 AM This comment has been removed by a blog administrator.
Terima Kasih Sudah Berkomentar
July 1, 2013 at 12:38 PM

Met pagi gan.. @salam kenal.

Balas
Terima Kasih Sudah Berkomentar
Anonymous
July 1, 2013 at 5:10 PM

Nice post sob.. :D

Komen back yah sob..

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 8:17 PM

ane bukan mastah -_-

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 8:18 PM

kan bisa di edit lagi :)

Balas
Terima Kasih Sudah Berkomentar
July 1, 2013 at 8:21 PM

ok sob :D

Balas
Terima Kasih Sudah Berkomentar
July 5, 2013 at 7:31 AM

nyimak gan,,mantab tutornya
di tggu kunbal'a

Balas
Terima Kasih Sudah Berkomentar
Anonymous
July 6, 2013 at 8:11 AM

Saya masih kurang ngerti sob kegunaannya :)

Balas
Terima Kasih Sudah Berkomentar
April 20, 2014 at 3:39 AM

tooltip...keren juga jika bisa diaplikasikan ke blog kita....yang sekiranya tulisan kurang jelas bisa diperjelas dengan tooltip atau keterangan sembulan...oke salam sob

Balas

Tolong berkomentar sesuai topik pembicaraan, dilarang spam dan jangan menaruh link aktif, terimakasih. Join This Site Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Silakan berkomentar dengan sopan