* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background-color: black; } .badan { width: 880px; margin: 35px auto; background-color: white; padding: 20px; overflow: hidden; } .badan h2 { color: crimson; border-bottom: 1px solid gainsboro; margin: 5px; margin-bottom: 13px; } .list-produk { border: 1px solid gainsboro; padding: 10px; float: left; width: 200px; margin: 5px; } .list-produk:hover { transition-duration: 700ms; box-shadow: 5px 5px gainsboro; } .list-produk img { width: 100%; height: 175px; display: block; margin-bottom: 5px; } .list-produk h4, .list-produk h5 { color: crimson; text-align: center; margin-bottom: 5px; } .tombol { text-decoration: none; border-radius: 7px; padding: 7px; display: block; float: left; width: 45%; margin: 4px; text-align: center; color: white; } .tombol:hover { background-color: black; transition-duration: 700ms; } .tombol-detail { background-color: green; } .tombol-beli { background-color: crimson; }
Skip to content Skip to sidebar Skip to footer

Memasang Tooltip CSS untuk Blog di Blogger

Selamat siang sahabat.. Haduch yang habis pada sholat jum'at. 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....
m