Tooltips memang mempercantik penampilan title pada link yak sob :p Sebelumnya Beben si bloglang pernah memosting Easy jQuery tooltip plugin. Disana ada variabel penulisan sebuah link dalam menggunakannya. Nah, sekarang bagaimana tooltip ini bisa muncul hanya dengan penulisan biasa pada sebuah link tanpa embel-embel variabel :-/ Tooltip yang muncul nanti akan memberikan keterangan atas yaitu title sobat, dan yang bawah address linknya.
Pake script sob :D dan sedikit CSS yah kalau mau ;)) Aturan script harus disimpan pada bagian bawah, maka waktu aku praktekan menyimpan script tersebut persis sebelum tag </body> bisa jalan tuh :D Kalau tidak jalan sobat bisa menyimpan scriptnya dibawah tag <head> Dan letakan CSS berikut sebelum tag ]]></b:skin>
div.nicetitle {
position: absolute;
padding: 4px;
top: 0px;
left: 0px;
color: white;
font-size: 13px;
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 25em;
font-weight: bold;
background: url(NTBG.PNG);
/* Mozilla proprietary */
-moz-border-radius: 10px;
}
div.nicetitle p {
margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
text-align: left;
padding-top: 3px;
}
Ganti tulisan warna merah itu dengan sebuah gambar yak sob. Ini dari tadi nerangin kesana kemari, scriptnya mana gambarnya mana :)) =)) Ya sudah untuk mendapatkan demo, script dan gambarnya sobat bisa klik tombol readmorenya yah :"> :D Silahkan kesini Nice titles, you want more Bonus. bai bai :-h
position: absolute;
padding: 4px;
top: 0px;
left: 0px;
color: white;
font-size: 13px;
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 25em;
font-weight: bold;
background: url(NTBG.PNG);
/* Mozilla proprietary */
-moz-border-radius: 10px;
}
div.nicetitle p {
margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
text-align: left;
padding-top: 3px;
}
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...