Kali ini saya mau posting Bagaimana Cara membuat Tooltip CSS pada Blog. Tooltip adalah sebuah clue atau sebuah penjelasan yang keluar saat kita menggeser mouse di sebuah link. Biasanya tooltip menggunakan Javascript sebagai penggeraknya, tapi kali ini saya mencoba membuat tooltip yang murni dari paduan HTML dan CSS saja, tidak ada unsur Javascript yang akan membebani blog. Dengan moz dan radius yang luamayan enak dipandang mata. dan beberapa paduan border unik. hehe.. Untuk Font dan Ukuran biar ngikut sama CSS template Blogger aja.
Copy Sript dibawah ini :
.horr {
outline: none;
cursor: alias;
position: relative;
}
.horr span {
margin-left: -999em;
position: absolute;
}
.horr:hover span {
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
background: -moz-linear-gradient(center top , #9CB6C5, green) repeat scroll 0 0 transparent;
border: 3px solid grey;
color:#fff;
padding: 5px;
}
dan silahkan pastekan tepat di atas ]]></b:skin> pada template blog anda.
Cara mengaktifkan Tooltip adalah dengan cara mengedit dan menambahkan class="horr" dalam tag <a href pada setiap posting yang akan di pasang Tooltip. Dan menambahkan tag <span> di dalam link tersebut.
Contoh :
<a href="#" class="horr">Kang Mis<span><b>Kang
Mis</b>. Orang yang simpel, tidak neko-neko tapi orangnya supel,
keren, pinter rajin menabung lagi. aQ wae heran og,,
wkwkwkw...</span></a>
0 comments:
Post a Comment