'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Membuat Bubble Tooltips Dengan CSS Seri 2

    Seperti pada umumnya bila hanya menggunakankode CSS, maka pembuatan Bubble Tooltips ini jadi lebih mudah. Lihatlah screenshots Bubble Tooltips yang dimaksud dalam tutorial ini.

    Cara membuatnya adalah seperti berikut ini :

    1. Pertama masuk ke Edit HTML.
    2. Carilah tag </head>

    3. Letakkan di atas tag </head> ini
    kode css berikut lalu simpan template Anda.

    <style type="text/css">

    p {
    margin: 15px 0;
    padding: 5px;
    }

    p a {
    position: relative;
    color: #000;
    text-decoration: none;
    }

    a span {
    display: none;
    }

    a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */

    a:hover span { /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    opacity:1.0;
    z-index:10;
    top: 5px;
    left: 40px;
    width: 220px;
    border: 2px solid #f00;
    -moz-border-radius: 0px 8px 0px 8px;
    background-color: #ffff00;
    color: #f00;
    padding: 10px;
    font-size: 12px;
    }

    p.test a }

    </style>



    KETERANGAN :

    Anda bisa sesuaikan warna border, warna background dan warna teksnya dengan warna yang Anda sukai.

    4. Penggunakan kode pada linknya,
    awali dengan kode <p class="test"> sebelum link yang Anda miliki.


    Contohnya jadi seperti ini :

    <p class="test">
    <a target="_blank" href="URL link Anda">Judul link<span>Teks kalimat tooltips</span></a></p>


    Selamat mencoba, good luck!


    x_3bfae512

    Share this:

    Post a Comment

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018