cara menambahkan balon tips pada template dan postingan

kali ini saya akan membagi sedikit ilmu bagaimana cara memasang balon tips pada template maupun postingan.
ngak terlalu sulit kok untuk membuatnya tinggal ikutin aja langkah dibawah ini.

penerapan trik ini menggunakan CSS kode yang biasanya terletak diatas kode "]]></b:skin>"
jadi tinggal copas aja script berikut diatas kode "]]></b:skin>"


/*---------- 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/AVvXsEhPNBsdEbMR-GHfxRi52aB0DGiWoIvEbY6m6cEAgZA6t8NhSodgHUda25rOiQVogPLBsH2Jc-HkWA3wIArMKL_C11_EGGQj23IHbDfJHbmP3RkNN5L2cvjphoObeobac4q0GVYzdUZbfZs/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3T8HfTZMQDZJxkrq46RVNs04133NKyfKcon514RJd3pTGd_OicsNXtUzW49WvMJu9hJe15i3LdUZKOMAxoVLOgrajqP4cNmTU8w__1ZTNbLDBkdftR1qf0vwg3EzhwP43qARdNECi4Cg/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNBsdEbMR-GHfxRi52aB0DGiWoIvEbY6m6cEAgZA6t8NhSodgHUda25rOiQVogPLBsH2Jc-HkWA3wIArMKL_C11_EGGQj23IHbDfJHbmP3RkNN5L2cvjphoObeobac4q0GVYzdUZbfZs/) no-repeat bottom;
}

/*---------- balon tips END-----------*/


Untuk penggunaannya sendiri seperti ini :

• Jika kalian menggunakannya pada link, tinggal tambahkan deklarasi class="bt" didalam kode HTML link kalian.

          <a href="http://tipsbloggingdankomputer.blogspot.com"></a>
          Ubah menjadi
          <a class="bt" href="http://tipsbloggingdankomputer.blogspot.com"></a>

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

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

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

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

Bingguk yah..???
dicontohin deh cara penulisannya

<a class="bt" href="URL KALIAN">
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>

Related Posts:

Tweet