Tanpa basa basi langsung saja ke poinnya, sebelumnya lihat demo dulu.
DEMO
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
2. Menampilkan gambar dengan link
DEMO
1. Login ke akun web/blog anda
2. Klik template dan dilanjutkan dengan edit HTML
3. Cari kode
4. Copy dan paste kode dibawah ini tepat diatas kode
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>