Kamis, 05 September 2013

Cara Membuat ToolTip Keren Di blog

Efek yang dihasilkan oleh Tooltip ini nantinya berkedip-kedip, keren!. Jadi, buat sahabat yang tertarik untuk mencoba Tooltip ini, berikut langkah-langkahnya: 


1. Masuk dulu ke akun blogger Sahabat
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template Sahabat dengan mengKlik Download Full Template
(Ini dilakukan jika dirasa perlu, atau lewatkan saja).
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy-Paste Kode CSS dibawah tepat Di Atas ]]></b:skin>

a.tooltip {
        position: relative;
        text-decoration: none;
    }
    a.tooltip::before {
        position: absolute;
        content: attr(data-title);
        background: #000;
        width: 200px;
        padding: 5px 10px;
        color: #fff;
        top: -1000px;
        text-align: justify;
        z-index: 99;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
        border: 5px solid #A52A2A;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        text-decoration: blink;
        visibility: hidden;
        font: normal 12px/20px Arial,sans-serif;
    }
    a.tooltip:hover::before {
        top: 100%;
        visibility: visible;
    }
6. Nah, Untuk cara memanggil Tooltipnya sahabat hanya perlu menambahkan beberapa kode kecil seperti conth dibawah ini.
Untuk Link:
<a href="URL-LINK" class="tooltip" data-title="Effect tooltip">Arahkan Cursor Ke Link ini </a>
Untuk image:
<a class="tooltip" href="URL-LINK"  data-title="TITLE-TOOLTIP!"><img alt="title" src="URL-IMAGE.JPG" width="300" height=225px" class="tooltip"/></a>
Demikian sahabat sekalian sedikit Cara Membuat ToolTip Keren Diblog. Semoga Tulisan ini berkenan di hati sahabat sekalian dan bermanfaat.
Salam.

Cara Memasang Kotak Komentar Facebook Disebelah Komentar Blog Comments
0 Comments

0 komentar:

Posting Komentar

 
Blogger Widgets