Kamis, 20 Februari 2014

Selamat siang sahabat.. Haduch yang habis pada sholat jumat. Ganteng2 ya..?? hehe
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>
Hasilnya akan seperti dibawah, Coba anda geser mouse ke link di bawah ini. 
Kang Mis Kang Mis. Orang yang simpel, tidak neko-neko tapi orangnya supel, keren, pinter rajin menabung lagi. aQ wae heran og,, wkwkwkw...
Selamat Berkreasi....

Categories: , , , , , ,

0 komentar:

Posting Komentar

Subscribe to RSS Feed Follow me on Twitter!