Cara Buat Bubble ToolTip

Wah, aku nambah pengetahuan baru nih..... artikel ini, aku dapet dari kang rohman dan temen aku, yusrond
sebelumnya trima kasih ya....

Pertama aku kasih contohnya ya!! yg di maksud Bubble tooltip adalah ini:
Contoh: Arahkan Mouse Kamu DisiniLha, dah taukan Sekarang Yang dimaksud Bubble tooltip??


Walaupun sudah dijelaskan di blog mereka, tapi aku ingin memperjelas apa yang di maksud Bubble ToolTip

Wah kita mulai aja ya.... Bismillahirohmannirohim......

1. MAsuk ke Blogger, terus login dengan alamt email-mu dan paswordmu sendiri, jgn password facebook(halah basa-basi)
2. Kedua masuk ke Tata Letak, terus pilih menu Edit HTML, dan jgn lupa centang kotak kecil Expand Template Widget

Dan kemudian cari kode di bawah ini:

]]></b:skin>

Setelah ketemu, paste kode di bawah ini, dan letakan di atas ]]></b:skin>

/*---------- bubble tooltip (by: Mr.K)-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
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.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6oiglzfZSKrAwoHQ1mD4H_ebcWtw4_pVtb97ENW2j1dM-4IpQq08bvBHaaDX4bfZgsBGocEj21XfM19Tp6Edry4xdBL2EOrjYDRryAHcW6JaDEp8W-KMXGp-ox-RpQT7-gE1-_DWr0vU/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXwW2DpI3eQoRFAmJaqJ1nM0OQMDsTlBGfgheUl29qcaI1zrIbwYvPsZEcTZvwpStemTV4bo9c4O-zAdeX0tR29PcJq5m4AlVCTpB8xfRuyBZLGNeNF1Wn2Ugi-bESooTmfokptzu1Yrk/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6oiglzfZSKrAwoHQ1mD4H_ebcWtw4_pVtb97ENW2j1dM-4IpQq08bvBHaaDX4bfZgsBGocEj21XfM19Tp6Edry4xdBL2EOrjYDRryAHcW6JaDEp8W-KMXGp-ox-RpQT7-gE1-_DWr0vU/) no-repeat bottom;
}

Jika sudah, simpan template.

Lalu apakah sudah sampai disitu??? tidak sob, masih ada lagi yaitu cara memasukan link-nya

ini nih kode-nya:
<a href="link_tujuanmu" class="tt">Teks link yg muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

Wah, selamat mencoba