Blog Cinangka

Menambah balon tips pada template dan postingan

Posted by Taufiq Rohman Wednesday, October 19, 2011
Share this Article on :

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(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

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



Untuk penggunaannya sendiri seperti ini :

1. 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>

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

3. Panggil gambar dibagian 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 kalian menuliskan komentar.

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

Related Post:

Post a Comment