Kamis, 26 Agustus 2010
Membuat Balloon Tooltip Dengan Css3
Setelah sebelumnya saya mnjelaskan tentang cara membuat Balloon tooltip pada dengan css, sekarang saya akan mencoba membuat balloon Tooltip dengan Css3. Ya memang sekarang lagi seru-serunya dengan Css3. Untuk contoh balloon tooltip ini kalian bisa melihatnya dibawah ini :
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
Jangan Lupa simpan.
Baca juga :
1. cara membuat balloon tooltip dengan jQuery
2. cara membuat balloon tooltip pada semua link blog
Semoga bermanfaat.
No comments yet