Membuat Bubble Tool Tips

   

Bubble tool tips ini sangat berguna sekali untuk memberikan informasi tentang sebuah link. Jika mouse diarahkan di atas link maka secara otomatis  akan ada informasi tentang link tersebut.

Biasanya untuk membuat balon tips ini menggunakan javascript dan pasti akan memberatkan loading blog, kali ini saya memberikan trik untuk membuat bubble tool tips ini dengan menggunakan CSS murni sebagai pemanggil kodenya.



Contoh hasil dari  Bubble Tool Tips






Icons Gallery


Free Download
Icons 









Adapun langkah-langkahnya sebagai berikut :



1.    Seperti biasa sobat logi dahulu ke blogger



2.    Pilih menu Design >> Edit HTML



3.    Cari kode ]]></b:skin>



4.    Copas kode CSS di bawah ini sebelum kode tadi

/*---------- bubble tooltip-----------*/

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

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: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

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/AVvXsEjI1FO6HAFbAyPTqqieql9hrhmdWzj-oYdgeeOhIQJ8Le5kqW7OtR4v7Oi4oTQQHooqRyhajvEe-y5cXib2lUgyPI5sA2RZUjaFZp8nitmv-jpC2spEbFks0ADpvcdthXrDH32rascrfTc/s320/bubble-712378.gif) 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/AVvXsEg18OaJzE_KMPf9SyvqayMZ-zrtmqz3vwB7BB6z5Dq18W9woQdHNGyFV0Wqq28N0bvlk3743EA1opNgjq_j8u8A2aW0eX8t44A-p27QNf62e65bVad2eAmcNA3hl3crbUsxB2LDYLmsLAM/s320/bubble_filler-711451.gif) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1FO6HAFbAyPTqqieql9hrhmdWzj-oYdgeeOhIQJ8Le5kqW7OtR4v7Oi4oTQQHooqRyhajvEe-y5cXib2lUgyPI5sA2RZUjaFZp8nitmv-jpC2spEbFks0ADpvcdthXrDH32rascrfTc/s320/bubble-712378.gif) no-repeat bottom;

}

5.    Sekarang simpanlah template sobat



6,     Klik tab Page Elements >> Add Gadget



7.    Copy kode di bawah ini dan pastekan ke dalam gadget sobat

<a href="URLLINK SOBAT"  class="tt">

Nama link disini

<span class="tooltip">

<span class="top"></span><span class="middle">

Kerterangan atau tulisan pada tooltip disini

</span><span class="bottom"></span><span>

8. Simpan gadget sobat dan lihat hasilnya



Selamat mencoba, semoga bermanfaat dan sukses selalu buat sobat-sobat blogger



Jangan lupa komennya, makasih

Posted in: CSS 3,Trik Blogger,Tutorial Blogger