Membuat Bubble Tool Tips 100% Memakai Css
Bubble Tool Tips ini mempunyai kegunaan sekali untuk memperlihatkan warta perihal sebuah link (bisa link refferal agar banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala warta yang ada yang dituliskan. Biasanya untuk menciptakan balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang memakai CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini . 
Tempat Blogging
Tempat Blogging Penerapan trik ini pake CSS, dan ini ia codenya:
Tempat Blogging /*---------- 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/AVvXsEiEa2ifVIebdeuPatCjVAffyuQSXoAAKRh7gVuVfNKAJtcYFVQmEFmyLIsdPAKSRxCvg18IxspBJDicbHNfCdHYQO8ji7y4mr1kz8CkTFXcJ-Okwl5NGyzfinfMNPcJbuOUORV_cicFAbs/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3RFcF-8TL1a_ZlJC3v4XqbK0-1vzOjlUOVvx_TJhhFy-DiZyEcgMIDP1TVP_sgmdfaKpjA7-tBTzmXXFmskyYwLlWVar08o4-u565nGGdX3oZJJFZe74-Lc1v9iBSlNodq9yjdFLIr0/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEa2ifVIebdeuPatCjVAffyuQSXoAAKRh7gVuVfNKAJtcYFVQmEFmyLIsdPAKSRxCvg18IxspBJDicbHNfCdHYQO8ji7y4mr1kz8CkTFXcJ-Okwl5NGyzfinfMNPcJbuOUORV_cicFAbs/) no-repeat bottom;
}
/*---------- balon tips END-----------*/
Tempat Blogging
Tempat Blogging Untuk penggunaannya:
Tempat Blogging
Tempat Blogging 1. Link yang udah dibentuk di kasih deklarasi class="bt".
Tempat Blogging Link dalam code HTML bentuknya ibarat ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi ibarat ini : <a class="bt" href="http://dindingcoret.com"></a>
Tempat Blogging
Tempat Blogging 2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.
Tempat Blogging
Tempat Blogging 3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara instruksi "balontips".
Tempat Blogging
Tempat Blogging 4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara instruksi "balontips" dibawah code "atas". Ditempat inilah teman menuliskan komentar sobat.
Tempat Blogging
Tempat Blogging 5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara instruksi "balontips" dibawah code "tengah".
Tempat Blogging
Tempat Blogging Contoh penulisan code dapat dilihat disini:
Tempat Blogging <a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat teman tulis info perihal link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
0 Response to "Membuat Bubble Tool Tips 100% Memakai Css"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda