/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
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.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUA8RLwHYhS65U7i4EXxoyx6ai0vwS8v2Dxg9h45BVlz3DU0MIkIIlcu93A7xH4WFLjRY0jB92p7fY8jv6liod2SDniB70jVfLRb9v2Af7GumkAFeX5ibmCkIQnEmnd72XAwagypFBXE/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8tKa7261Tw9aGVl5s2dgi3rv1mQ_VIfWMNULadv-1QIeJUbWGSB84YETBbsDBkltNCLDBmz59sK5Bx-nBtPTP3dPtgbmpOgdNNB-4F-8vzyPb6SAK6EqaRHGUGDyOoeuYZcKAiKZp58/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUA8RLwHYhS65U7i4EXxoyx6ai0vwS8v2Dxg9h45BVlz3DU0MIkIIlcu93A7xH4WFLjRY0jB92p7fY8jv6liod2SDniB70jVfLRb9v2Af7GumkAFeX5ibmCkIQnEmnd72XAwagypFBXE/) no-repeat bottom;
}
/*---------- balon tips END-----------*/
1. The link must be declare by class="bt".
Link dalam code HTML bentuknya seperti ini <a href="http://example.com"></a> after declared then : <a class="bt" href="http://example.com"></a>
2. Next, Declare baloontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. insert between link code.
3. You can adding picture by <span="atas"></span>. Insert between link code "balontips".
4. For Picture the code just like this <span="tengah"></span>. Insert between link code "balontips" dibawah code "atas". And this the text will shown.
5. Picture code just like this <span="bawah"></span>. Insert in "balontips" below "tengah".
You can see the complete code here:
<a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
example 1 :
PUT THE MOUSE HERE
TEXT HERE
example 2 :
HEI YOU HERE!!!
Tulisannya di sini
Ini contoh gambar nya:
dan adanya ruangan kosong di antara adalah karena enter diatara tag span jadi harus ditulis satu line supaya aman, ganti baris diganti pakai tag
Example 3 :
Arahkan MOUSE sobat ke tulisan iniNah tipsnya akan muncul seperti ini. Bagus kan??
Ini contoh gambar nya:
Example 4 :
Arahkan ke sinitext tanpa link dan
Example 5 :
Arahkan ke sinitext tanpa link dan menyamarkan button yang sudah dibuat dengan javascript
READ MORE - Balloon Tips Previews and Examples
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
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.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUA8RLwHYhS65U7i4EXxoyx6ai0vwS8v2Dxg9h45BVlz3DU0MIkIIlcu93A7xH4WFLjRY0jB92p7fY8jv6liod2SDniB70jVfLRb9v2Af7GumkAFeX5ibmCkIQnEmnd72XAwagypFBXE/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8tKa7261Tw9aGVl5s2dgi3rv1mQ_VIfWMNULadv-1QIeJUbWGSB84YETBbsDBkltNCLDBmz59sK5Bx-nBtPTP3dPtgbmpOgdNNB-4F-8vzyPb6SAK6EqaRHGUGDyOoeuYZcKAiKZp58/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUA8RLwHYhS65U7i4EXxoyx6ai0vwS8v2Dxg9h45BVlz3DU0MIkIIlcu93A7xH4WFLjRY0jB92p7fY8jv6liod2SDniB70jVfLRb9v2Af7GumkAFeX5ibmCkIQnEmnd72XAwagypFBXE/) no-repeat bottom;
}
/*---------- balon tips END-----------*/
1. The link must be declare by class="bt".
Link dalam code HTML bentuknya seperti ini <a href="http://example.com"></a> after declared then : <a class="bt" href="http://example.com"></a>
2. Next, Declare baloontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. insert between link code.
3. You can adding picture by <span="atas"></span>. Insert between link code "balontips".
4. For Picture the code just like this <span="tengah"></span>. Insert between link code "balontips" dibawah code "atas". And this the text will shown.
5. Picture code just like this <span="bawah"></span>. Insert in "balontips" below "tengah".
You can see the complete code here:
<a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
example 1 :
PUT THE MOUSE HERE
TEXT HERE
example 2 :
HEI YOU HERE!!!
Tulisannya di sini
Ini contoh gambar nya:
dan adanya ruangan kosong di antara adalah karena enter diatara tag span jadi harus ditulis satu line supaya aman, ganti baris diganti pakai tag Example 3 :
Arahkan MOUSE sobat ke tulisan iniNah tipsnya akan muncul seperti ini. Bagus kan??
Ini contoh gambar nya:
Example 4 :
Arahkan ke sinitext tanpa link dan
Example 5 :
Arahkan ke sinitext tanpa link dan menyamarkan button yang sudah dibuat dengan javascript
