Tips dan Cara Membuat Balon Tips (Bubble Tips)

|

Halo sobat semua! Semoga hari ini sobat semua sehat-sehat aja ya! Musim hujan gini memang rentan banget sama yang namanya sakit ugh.

Hari ini dindingcoret mau kasih tips trik dan cara untuk membuat Balon Tips atau bahasa inggrisnya Bubble Tips. Bubble tips digunakan untuk memberikan informasi lebih lanjut tentang link yang akan dibukanya. Sobat semua pasti tau PPC yang kalau mouse di gerakkan diatas link nanti ada balon yang jelasin tentang isi iklannya apa. Nah sistem kerja Balon Tips in imirip banget kaya gitu. Ok, kalau penasaran ikuti aja link ini untuk sampai ke demonya.


Penerapan trik ini pake CSS, dan ini dia codenya:

/*---------- 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/AVvXsEiKBXyAMJRRtupDruwNlZ0WKrqieUm5s7ANGCXHwvh0OaC5eHGkxWjOBzI8xeq-YjW2_rEGpEpcc7vtB5qXp5Uvr5KLqj-ciGppOVY04gyJdiY5YdIkjW8yPKIldcokkO-gLK3-v8tT-sk/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_w8W0WD6Nc-U17GUCxsbYL-s0AxIi-hf_ufld_zi6wJtz7TcfTQIRLaWaReABekM_z8e1BVLEMI_acsR9LpqFScQ_3m2W9awwCD15BNDk418fDlDM94vRFSI_qurmjg7F9UWcYX5TFuw/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBXyAMJRRtupDruwNlZ0WKrqieUm5s7ANGCXHwvh0OaC5eHGkxWjOBzI8xeq-YjW2_rEGpEpcc7vtB5qXp5Uvr5KLqj-ciGppOVY04gyJdiY5YdIkjW8yPKIldcokkO-gLK3-v8tT-sk/) no-repeat bottom;
}

Untuk penggunaannya:
1. Link yang udah dibuat di kasih deklarasi class="bt". Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a>. Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>

2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.

3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".

4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.

5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".

Contoh penulisan code bisa dilihat disini:

<a class="bt" href="http://dindingcoret.com/">dindingcoret oke
      <span class="balontips">
            <span class="atas"></span>
                  <span class="tengah"&gt;Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon</span>
             <span class="bawah"></span>
      </span>
</a>

Share