Cara Membuat Balloon Tooltip Pada Link di Blog

Ballon Tooltip adalah informasi atau Penjelasan dari link atau gambar.Biasanya kita menemukan ini pada software ataupun system tray komputer kita. Nah kali ini saya akan menjelaskan cara membuat Ballon Tooltip pada Link yang ada di blog kita. Bisa...?

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

pastinya pertanyaan itu bisa dijawab dengan mengikuti langkah langkah dibawah ini:

1. Login ke Blogger Kalian
2. masuk k rancangan / tata letak
3. pilih Edit HTML ( Back Up template dulu )
4. cari kode ]]></b:skin>
5. lalu sisipkan kode berikut diatasny kode tadi

/*---------- bubble tooltip -----------*/
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/AVvXsEiwzO_UbvEhHgzRHYowwLsaLqEbQvl77cX7wXudijTaLUiSvxx78M6jMYNfw0vK7_y6SThncWGoQuZO674YN2sGfdJid8fV5iUl_F400mS4h-uNKlOVXdtAuWMwhR5gQc89sO7xfPre2A4/) 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/AVvXsEi68xyiXGLLg-6xzTrCiPOG0XD-Lzdow2zb8GEP0khZvZn0_xEB7Fr7SdBLwrR5f2ryumGlfrBCaXafg6Mi2Nn_iAOgjVtphPBewGmhSyMT9irJtqoJxVNDCgif3Y-6ArLlfgDFRJJ2qe8/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzO_UbvEhHgzRHYowwLsaLqEbQvl77cX7wXudijTaLUiSvxx78M6jMYNfw0vK7_y6SThncWGoQuZO674YN2sGfdJid8fV5iUl_F400mS4h-uNKlOVXdtAuWMwhR5gQc89sO7xfPre2A4/) no-repeat bottom;
}

6. SIMPAN template.

Untuk menampilkan Balloon tooltipnya sendiri silahkan Copy code berikut:

<a href="TUJUAN LINK YANG AKAN DITUJU" class="tt">TEXT UNTUK LINK<span class="tooltip"><span class="top"></span><span class="middle">ISI DARI BALLOON TOOLTIP</span><span class="bottom"></a>

kETERANGAN :
== code warna merah : text yang kalian tulis
== code warna biru : Link yang akan diberi tooltip
== code warna Hijau : keterangan didalam balloon tooltip
== code warna pink : Link tujuan

Contoh hasilnya seperti ini :



Sekian dulu dan semoga bermanfaat... ditunggu komentarnya..
Baca juga :
1. cara membuat balloon tooltip dengan css3
2. cara membuat balloon tooltip dengan jQuery
3. cara membuat balloon tooltip pada semua link blog