Cara Membuat Bubble ToolTips

share

Bubble tool tips ini berguna sekali untuk memberikan informasi tentang sebuah link. jika digerakkan diatas link maka secara otomatis bubble tool tips ini akan keluar dengan segala informasi yang anda tuliskan.

biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan kodenya. adapun langkah-langkahnya adalah sebagai berikut.

1) Terlebih dahulu pastikan anda telah login dan membuka halaman dashbor blogger, lalu klik rancangan

2) Setelah itu akan tampil halaman rancangan, lalu klik menu Edit HTML.

3) Kemudian pada halaman Edit HTML, cari kode ]]></b:skin>

4) Selanjutnya anda letakkan kursor mouse tepat diatas kode yang anda cari.

5) Setelah itu copy dan paste kode seperti ini

/*---------- bubble tooltip by http://trikhebat.blogspot.com-----------*/ 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/AVvXsEhWQzLNaeLO99goMK732QOHi1c7cc5tIhEq80L-9HFOnD3SAGSixHbt8Suf5OekAX3TW1e46cBlQ3CIoB9Ud1skeMcSNx8BkkhZLaGOa_3EM3pRMhspSN5KLdJ6bKGoAaJBbEb6NZRoGRo/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/AVvXsEi1i87DRY01QuMTqJrOXpJVBGMj6ombqZvY7ccfcObCMk3Ps2K6GXhek90j2T44am5KT92jky6R-N0riJfoaU8UUowj-_tk5TkJea402uwh0jgof-Al5kAjjkmu913OrRpGFVC1tog8FOU/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/AVvXsEhWQzLNaeLO99goMK732QOHi1c7cc5tIhEq80L-9HFOnD3SAGSixHbt8Suf5OekAX3TW1e46cBlQ3CIoB9Ud1skeMcSNx8BkkhZLaGOa_3EM3pRMhspSN5KLdJ6bKGoAaJBbEb6NZRoGRo/s320/bubble-712378.gif) no-repeat bottom; }


6) Kemudian simpan perubahan template yang anda buat.

7)  Setelah itu untuk mengaktifkan fasilitas ini pada postingan yaitu menggunakan kode berikut yang ditulis pada halaman Edit HTML editor postingan.
<a class="tt" href="http://www.idr-clickit.com/register.php/ihsanulirfan.html"> nama link anda <span class="tooltip"> <span class="top"></span><span class="middle"> Idr clickit ptc terpercaya dan termudah </span><span class="bottom"></span></span> </a>
Note: ganti warna merah dengan link anda, ganti warna kuning dengan keterangan link anda


8) Berikut adalah contoh pembuatan link pada halaman editor postingan blog.

9) Apabila proses posting berhasil, maka akan tercipta postingan yang berisikan link yang mempunyai bubble tool tips.

Bagaiman teman-teman? sudah berhasil? sip. kalau masih ada yang bermasalah silahkan share di komentar.

semoga artikel "Cara Membuat Bubble Tool Tips" ini berguna bagi anda :)