Tooltip Sederhana

- September 05, 2014

Tanpa basa basi langsung saja ke poinnya, sebelumnya lihat demo dulu.


DEMO
infoalya.com


1. Login ke akun web/blog anda
2. Klik template dan dilanjutkan dengan edit HTML
3. Cari kode ]]></b:skin> atau  </style>
4. Copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> (gunakan ctrl+F untuk mempermudah pencarian)


/* Tooltip */  a:link, a:visited { position:relative; } .bgttooltip { width:300px; position:absolute; bottom:100%; margin:0 0 7px 0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#2B2B2B; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background: #2aa4cf; border-color:#2aa4cf; } .bgttooltip:before, .bgttooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; } .bgttooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; } a:hover .bgttooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .bgttooltip, .bgttooltip.left { left:0; right:0; } .bgttooltip:before, .bgttooltip:after, .bgttooltip.left:before, .bgttooltip.left:after { left:40px; right:auto; } .bgttooltip:before { border-top-color:#2aa4cf; } .bgttooltip:after { border-top-color:#2aa4cf; } /* Tooltip Provided by samhidayat */

5. Simpan template


Untuk memanggil kode tersebut gunakan kode dibawah ini, (dapat diletakkan dimanapun sesuka anda, di laman, posting ataupun sebagai gadget/widget)


1. Menampilkan teks dengan link
<a href="Link tujuan">Teks anda yang tampil <span class="bgttooltip">Teks dalam tooltip anda</span></a>

2. Menampilkan gambar dengan link
<a href="Link Tujuan"><img src="URL gambar" height="300" width="300" /><span class="bgttooltip">Teks anda disini</span></a>

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari