Coba arahkan mouse pada link berikut ini :
Untuk membuat balloon tooltip seperti ini, kalian harus login dulu ke blogger kalian, selanjutnya ikuti tahap-tahap berikut ini:
1. Masuk ke rancangan ---> EDIT HTML (centang Expand Template Widget)
2. Simpan CSS berikut diatas kode ]]></b:skin>
#bubblemenu li{ display:inline; float:left; margin-left:10px; cursor:pointer; }
#bubblemenu li >div{ width:150px; min-height:100px; position:absolute; display:inline; margin-left:-70px; padding:5px; visibility:hidden; opacity:0; margin-top:-150px; background:#fff; font-size:1em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 8px gray; -webkit-box-shadow:0 0 8px gray; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',Direction=135,Strength=3); box-shadow:0 0 8px gray; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
#bubblemenu li:hover >div{visibility:visible; opacity:1; margin-top:-150px; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
3. Simpan template kalian
Tahap selanjutnya adalah pemanggilan kode diatas, Sekarang kalian masuk ke Elemen Halaman.
== Tambah Gadget --> HTML/JavaScript
== Simpan kode berikut didalam content Javascript nya
<ul id="bubblemenu"> <li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div> Keterangan Dalam Balloon Tooltip<br />
</div><br />
</li>
<li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div>Keterangan Dalam Balloon Tooltip<br />
</div> </li>
<li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div>Keterangan Dalam Balloon Tooltip<br />
</div> </li>
<li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a> <br />
<div> Keterangan Dalam Balloon Tooltip<br />
</div> </li>
</ul>
Keterangan :
- Kode Berwarna merah adalah Link kalian
- Kode Berwarna biru adalah keterangan dalam balloon tooltip