Cara Mudah Membuat Tooltip Dengan Kode CSS

Menyiapkan Kode CSS

1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}

Untuk mengatur posisi tooltip, ada bisa mengaturnya dengan memainkan kode top:auto; left:2px; right:auto; bottom:auto;.

3. Klik Save Template.

Menerapkan Tooltip di Blog

Anda bisa menggunakan tooltip ini di postingan atau di bagian lain blog anda. Kodenya:

<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>

Hasilnya: Kesini donk...

Gimana? Mudahkan?

Jangan lupa kasih komentar ya...