Bagaimana Cara Membuat Bubble Tooltip di Blog/Web

Hallo Sobat Maya apa kabar? hari Ini kang salman mau berbagi tips bagaimana cara membuat bubble tooltip dengan mudah. sebelumnya ada yang tau ga apa itu bubble tooltips? bubble tooltips adalah sebuah aplikasi yang hampir mirip dengan snapshoot, yang mana bila teks maka akan muncul keterangan tambahan, dan tentunya bisa kita arahkan ke link tertentu.

contoh :

Nah pada contoh di atas terlihat. saat teks "di sini" di sorot oleh pointer (mouse) maka akan muncul keterangan "untuk konfirmasi" itulah yang di maksud dengan bubble tooltip

Dengan memasang dan membuat bubble tooltip di blog, maka blog kitaakan terlihat lebih menarik. kita lihat yuks bagaimana cara buatnya! ^_^

1. Login ke Blogger

2. Saat di dasbor pilih edit tampalete/tata letak

3. Lalu pilih Edit HTML

4. Copy aja kode di bawah ini :

/*---------- 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/AVvXsEiP9mOlgqyYZ1mxaqMAcy37P1N9_uGy_KistvRAkyf4kdCgekpwNFYd5gDinLM949d30Dp8YEv6hIRV4Qb98uAEriPdWQryPv3Ozqogqu0kjZ32OgXa8pEtxo4975t9-b7iMju0vjNg50U/) 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/AVvXsEhQFc790NPH3g1-9AqH20t7bgx08a3gBvPU0FfZbhd9TzKn4NuoJqemWCsO1tfczcCT9erpNsfTHQIgV88EfPB4Diwxa_AiZyts0yzBdo1Nw73vq7x848_ucvFPWj3xX8nzxszxa1LJUZ4/) repeat bottom;}a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9mOlgqyYZ1mxaqMAcy37P1N9_uGy_KistvRAkyf4kdCgekpwNFYd5gDinLM949d30Dp8YEv6hIRV4Qb98uAEriPdWQryPv3Ozqogqu0kjZ32OgXa8pEtxo4975t9-b7iMju0vjNg50U/) no-repeat bottom;}
2. Simpan (paste) di atas ]]></b:skin>

3. Lalu Save

Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :

klik <a class='tt' href='Tujuan link yang di inginkan'>di sini<span class='tooltip'></span><span class='top'/><span class='middle'>untuk konfirmasi</span><span class='bottom'/></span></a>

Hasilnya :

Keterangan :

1. Link biru : bisa anda gunakan untuk membuat link ke arah artikel lain, bisa juga di kosongkan jika tidak diperlukan.
2. Link hijau : adalah teks yang akan di buat bubbletip, yang mana bila disorot oleh mouse maka akan muncul keterangan tambahan yang telah anda buat
3. Link warna orange adalah keterangan tambahan yang ingin anda tambahkan.

Ok semoga bermanfaat.

Postingan ini telah di Update ulang 1 september 2010


Lihat Juga :

•  Inilah 6 Cara Membuat Text Area untuk blogspot
•  Cara Pasang Widget Kirim Sms Gratis di Blog dan Website 
•  Cara Membuat Rating Pada Artikel Blog (Star Rating)
•  Menambah 3 Kolom Baru di Bawah Header Mirip Blog Kang Rohman

Jangan asal copy paste, baca aturanya di sini !
Post By Kang Salman
http://www.kucoba.com

Ingin mendapat penghasilan tambahan? Bergabung dan jadikan blog anda sebagai ladang uang bagi dompet anda. Daftar =>  disini <= klik!  untuk memanen uang $ seperti saya. Gratis

Dapatkan update artikel  terbaru kami langsung ke email anda.