Kali ini shevy mau coba share cara membuat Tooltip dengan menggunakan CSS tanpa Javascript, jadi tidak akan memberatkan loading blog. Untuk penggunaan CSSnya shevy menggunakan CSS3 jadi tidak akan support di IE6, dan hanya akan berjalan di IE8, Mozilla 3.5, dan Opera 10, browser lainnya belum di coba.
Beberapa kelebihan Tooltips ini :
- Tidak memberatkan loading blog.
- Full CSS tanpa menggunakan image sebagai background.
- gampang.
Kekurangannya :
- Tidak support Crossbrowser.
- Hanya support dengan browser yang sudah bisa menampilkan CSS3.
Kalo penasaran pengen buat juga, okeh ikutin aja langkah2 dibawah ini :
- Copy script CSS dibawah ini ke dalam web ato blog kamu. Penempatannya untuk blogger silahkan masukan script dibawah diantara script CSS yang lainnya. Atau diatas kode ]]>.
a.Tooltip{
position:relative;
z-index:24;
color:#fff;
font-weight:bold;
text-decoration:none;
}
a.Tooltip span{
display: none;
}
a.Tooltip:hover{
z-index:50;
text-decoration:none;
}
a.Tooltip:hover span{
display:block;
position:absolute;
left:0;
padding: 5px 2px 5px 5px;
width:200px;
min-height:50px;
color:#fff;
font: Georgia, "Times New Roman", Times, serif;
font-size:10px;
font-weight:bold;
text-align: center;
background-color: rgba(60, 132, 198, 0.8);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
-moz-border-radius:5px;
-webkit-border-radius:5px;
vertical-align:text-bottom;
text-transform:none;
}
a.Tooltip:hover span img {
width:120px;
height:100px;
padding:2px 2px 2px 2px;
text-align:left;
text-transform:none;
border:1px solid #CCCCCC;
}
- Kemudian simpan perubahan.
Cara Menggunakannya
Untuk memunculkan tooltipsnya, silahkan ikuti langkah2 dibawah :
- pada saat akan memasukan link pada Html atau template, tambahkan beberapa tag seperti dibawah ini :
Link Normal (Tanpa Tooltip)
<a href="http://shevy-blog.blogspot.com/" target="_blank" title="shevy-blog">shevy-blog</a>
Link Dengan Tooltip
<a
class="tooltip" href="
URL BLOG KAMU">
NAMA LINK
<span>
DESKRIPSI TEXT KAMU</span>
<img alt="
title gambar" src="
URL GAMBAR KAMU" />
</a>
Contoh:
<a
class="tooltip" href="
http://shevy-blog.blogspot.com">
shevy-blog
<span>
shevy-blog | Monetize Your Blog</span>
<img alt="
shevy-blog | Monetize Your Blog" src="
Http://.../image/shevy-blog.jpg" />
</a>
Keterangan Warna :
- Setiap kamu akan membuat link dengan fitur tooltip, kamu harus memasukan tag class="tooltip", seperti contoh diatas, tag yang shevy tandai dengan warna biru.
- Untuk tag yang shevy tandai dengan warna hijau, adalah untuk deskripsi atau keterangan atau tulisan apapun yang akan muncul pada kotak tooltips nanti.
- Sedangkan tag yang shevy tandai dengan warna ungu, adalah untuk memasukan gambar thumbnail pada tooltip. gunakan tag ini jika kamu mau memasukan gambar pada tooltip-nya.
Nah kayaknya cukup tuh keterangannya, apabila ada pertanyaan, atau kesulitan silahkan komen aja ya...
Untuk melihat Contoh Live nya silahkan klik link dibawah ini:
