Tutorial membuat bubble tool tips - Hallo sahabat review computer, Pada sharing kali ini yang berjudul Tutorial membuat bubble tool tips

Tutorial membuat bubble tool tips

Tutorial membuat bubble tool tips

Artikel Tutorial Blog,

Masuk ke dashboard ► LAYOUT/DESIGN ► EDIT HTML ► Download Full Template untuk berjaga-jaga bila terjadi kesalahan ► Centang Expand Widget ► sisipkan kode berikut dan paste di atas ]]> ► Save Template.

    /*-----pasang bubble tooltips di blogs-start----*/
    a.tt{
    position:relative;
    z-index:24;
    color:#B40404;
    font-weight:bold;
    text-decoration:none;
    }
    a.tt span{ display: none; }

    /*background:; ie hack, something must be changed in a for ie to execute it*/
    a.tt:hover{ z-index:25; color: #2E9AFE; background:;}
    a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
    padding: 15px 0 0 0;
    width:200px;
    color: #000000;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
    }
    a.tt:hover span.top{
    display: block;
    padding: 30px 8px 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgLtijj6Ml9a54FNi-COEhN6E8xg5TSXm1m6IE0JBjIs1kBcvRLV3DPxKZit8Lz1KoLeyNCspxLAMTsGrUq_Rdh_qBVHcLq-_hdwB3-5zGhg0nZQB8O1GGqtBTNpdNBG7iasPvpgzI_U/) no-repeat top;
    }
    a.tt:hover span.middle{ /* different middle bg for stretch */
    display: block;
    padding: 0 8px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-VHWRXctLtrgUmlMhWDdVLIaiPltww8cZuEdBIh_rYU731qpV787Rr1JqY80yeynnW_SaVS8wTuH8sBYPAdCHU2AIDk5aXzrTcpUKfvPY1Z5XWm5GnTH1rZHHX06MRxHIZiTQrB8qAE/) repeat bottom;
    }
    a.tt:hover span.bottom{
    display: block;
    padding:3px 8px 10px;
    color: #151515;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgLtijj6Ml9a54FNi-COEhN6E8xg5TSXm1m6IE0JBjIs1kBcvRLV3DPxKZit8Lz1KoLeyNCspxLAMTsGrUq_Rdh_qBVHcLq-_hdwB3-5zGhg0nZQB8O1GGqtBTNpdNBG7iasPvpgzI_U/) no-repeat bottom;
    }
    /*----membuat bubble tooltips di artikel -end----*/


Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :
klik<a href="Tujuan link yang di inginkanl" class="tt">di sini<span class="tooltip"><span class="top"></span><span class="middle">untuk konfirmasi</span><span class="bottom"></a>

Hasilnya :

 

http://asksalman19.blogspot.com

Demikianlah Artikel Tutorial membuat bubble tool tips

Sekian review computer Tutorial membuat bubble tool tips, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan kali ini.

Anda sedang membaca artikel Tutorial membuat bubble tool tips dan artikel ini url permalinknya adalah https://review-computer.blogspot.com/2010/07/tutorial-membuat-bubble-tool-tips.html Semoga artikel ini bisa bermanfaat.

Tutorial membuat bubble tool tips

Tag : Tutorial Blog,