Selamat siang sahabat.. Haduch yang habis pada sholat jum'at. Ganteng2 ya..?? hehe
Kali ini aku mau posting Bagaimana Cara menciptakan Tooltip CSS pada Blog. Tooltip ialah sebuah clue atau sebuah klarifikasi yang keluar dikala kita menggeser mouse di sebuah link. Biasanya tooltip memakai Javascript sebagai penggeraknya, tapi kali ini aku mencoba menciptakan tooltip yang murni dari paduan HTML dan CSS saja, tidak ada unsur Javascript yang akan membebani blog. Dengan moz dan radius yang luamayan yummy dipandang mata. dan beberapa paduan border unik. hehe.. Untuk Font dan Ukuran supaya 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 sempurna di atas ]]></b:skin> pada template blog anda.
Cara mengaktifkan Tooltip ialah 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 :
. Orang yang simpel, tidak neko-neko tapi orangnya supel, keren, pinter rajin menabung lagi. aQ wae heran og,, wkwkwkw...
Selamat Berkreasi....
Sumber https://kangmis.blogspot.com/
Kali ini aku mau posting Bagaimana Cara menciptakan Tooltip CSS pada Blog. Tooltip ialah sebuah clue atau sebuah klarifikasi yang keluar dikala kita menggeser mouse di sebuah link. Biasanya tooltip memakai Javascript sebagai penggeraknya, tapi kali ini aku mencoba menciptakan tooltip yang murni dari paduan HTML dan CSS saja, tidak ada unsur Javascript yang akan membebani blog. Dengan moz dan radius yang luamayan yummy dipandang mata. dan beberapa paduan border unik. hehe.. Untuk Font dan Ukuran supaya 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 sempurna di atas ]]></b:skin> pada template blog anda.
Cara mengaktifkan Tooltip ialah 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"><span><b></b>. Orang yang simpel, tidak neko-neko tapi orangnya supel, keren, pinter rajin menabung lagi. aQ wae heran og,, wkwkwkw...</span></a>
Hasilnya akan menyerupai dibawah, Coba anda geser mouse ke link di bawah ini. . Orang yang simpel, tidak neko-neko tapi orangnya supel, keren, pinter rajin menabung lagi. aQ wae heran og,, wkwkwkw...
Selamat Berkreasi....