Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini .
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/AVvXsEg0li82xhvv3wp0GW3bQymWFcYMexO2RSGtZpwtiVMBNRzuNPFcGvHTfVhjky9cy3Zz8AfhTznU7GsFeuDVVnliMRQiHyRW5obs2Z4fbxo8RpccQ5JaBEmaSe3Aog2U49V4NkfbXdj-Kpk/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewAeec6QRatGhNGN-Kl0kKFvsl9O6EujlPevtB_zye2RRVaKhMgxaHg0cZjdT-RFqKc25hYi_YyqpuVUlcXmE3OnDPweWQSOR7f85DaQ1mTEwUA-vLkDpCT_b9ingEZjwWHy0cyhON50/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0li82xhvv3wp0GW3bQymWFcYMexO2RSGtZpwtiVMBNRzuNPFcGvHTfVhjky9cy3Zz8AfhTznU7GsFeuDVVnliMRQiHyRW5obs2Z4fbxo8RpccQ5JaBEmaSe3Aog2U49V4NkfbXdj-Kpk/) no-repeat bottom;
}
/*---------- balon tips END-----------*/
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="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>
Artikel Terkait:
- Pasang Iko/Icon Twitter Burung Terbang
- Menghilangkan Tampilan Entri Lawas
- My Community
- Mengembalikan Blog yang Terhapus
- Cara Membuat Chating Box Via Chatroll
- Membuat Folder Rahasia Dengan Password di Windows 7
- Customized tampilan "Blogger Followers"
- Navbar Blogger Support dengan Warna Transparant
- Gratis Download koleksi Icon Rss Feed
- Link Sahabat
- Cara Membuat Daftar Isi di Blog
- Cara Membuat Tombol Widget Install Otomatis
- Bagaimana Cara Membuat artikel terkait atau related posts
- Cara Mengedit Tampilan Berlangganan Artikel Feedburner
- Modifikasi Formulir Berlangganan FeedBurner
- Menambah Fasilitas Reply di Kotak Komentar Blogspot
- Pasang Emot Unik di Kotak Komentar
- Cara Membuat Share This Post
- Cara Pasang Widget Share The Love
- Feed Burner Headline Animator dengan Background Keren
- Tampilan Artikel Berlangganan Feedburner
- Tampilan Baru Follower (Google Friend Connect)
- Modifikasi Auto Read More untuk Blogger
- Cara Membuat Buku Tamu Tersembunyi
0 komentar:
Posting Komentar