Tool tips adalah sebuah info atau tips yang akan ditampilkan ketika kita menggeser korsor di teks yang sudah kita tentukan.
contohnya seperti ini:
Geser kursor anda DISINI Nah.. seperti inilah contoh Tool Tips..
elo Mau tahu cara membuatnya??
caranya gampang kok.
- Seperti biasa.. mula-mula pergi ke 'Tata Letak' trus "Edit HTML"
- Nah.. sekarang lo copy aje kode yang berwarna biru di bawah ne..
/*---------- tool tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOBvE2QJ2qJOAgBIK9-H-E9-e1cn7jAH91O7AlMwIOKJx9AMSq1X8gXEJiofIapkpFiFYqy4s29QUUyjl8Tm0qgZ3OdSNl2BpX9icYaxs76FTXwUn0sIKo6rA5MPlyzdpyBfiM2rHn18/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWb86H8QINGVrnJkprCyOsTjAOi6yq_L-7UaDJEt7gWMQaTxXDYjCKK-Hywyy_iRmJ0cDJaBGxswDbBH-RWRMOZ7Z_S-PqdC3NK3obCSUeZ_ulPG_4TF2__vh8dRVM_cN-klq9XPw5bQ/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOBvE2QJ2qJOAgBIK9-H-E9-e1cn7jAH91O7AlMwIOKJx9AMSq1X8gXEJiofIapkpFiFYqy4s29QUUyjl8Tm0qgZ3OdSNl2BpX9icYaxs76FTXwUn0sIKo6rA5MPlyzdpyBfiM2rHn18/) no-repeat bottom;
}
/*---------- tool tips END-----------*/
dah di copy tu code???
kalau udah, lo paste code tersebut di atas code ]]></b:skin> yang ada di "Edit HTML" tadi.
Udah!?
Nah sekarang "Simpan Template"
oke... Tahap pertama selesai
LANJUUUUUT...
sekarang cara menggunakannya:
Copy Code berikut ini:
<a class="bt" href="URLLINKSOBAT">Kata yang akan di munculkan
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Kata yang akan muncul di dalam Tool Tips apabila link/teks di sentuh
</span>
<span class="bawah"></span></span></a>
<.div>
Keterangan:
Teks yang berwarna MERAH Ganti dengan URL Kamu
Teks yang berwarna BIRU Ganti dengan Kata yang akan dimunculkan
Teks yang berwarna HIJAU Ganti dengan kata yg akan muncul di tool tips
LANJUUUUUT...
sekarang cara menggunakannya:
Copy Code berikut ini:
<a class="bt" href="URLLINKSOBAT">Kata yang akan di munculkan
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Kata yang akan muncul di dalam Tool Tips apabila link/teks di sentuh
</span>
<span class="bawah"></span></span></a>
<.div>
Keterangan:
Teks yang berwarna MERAH Ganti dengan URL Kamu
Teks yang berwarna BIRU Ganti dengan Kata yang akan dimunculkan
Teks yang berwarna HIJAU Ganti dengan kata yg akan muncul di tool tips
SELESAI DECH... ^_^ HOREEEE.....
jangan lupa kasih komen klo ada yg kurang ngerti.... oke bro??
:.