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 :

• Contoh Tooltip
  
  Ini adalah contoh Balloon Tooltip
  
  
• Contoh Tooltip
  
  Ini adalah contoh Balloon Tooltip
  
  
• Contoh Tooltip
  
  Ini adalah contoh Balloon Tooltip
  
  
• Contoh Tooltip
  
  Ini adalah contoh Balloon Tooltip
  
  
• Contoh Tooltip
  
  Ini adalah contoh Balloon Tooltip
  
  

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.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.