Cara Membuat Bubble Tooltip di Blog

Tweet

Salom Sahabat Blogger,pada pertemuan kali ini saya mau membahas bagaimana cara membuat bubble tooltip diblog,adapun salah satu kegunaannya adalah kita dapat menghemat ruang blog kita dengan memasang bubble tool,di menu tampilan utama kita tidak perlu untuk menampilkan segala informasi yang ingin kita tampilkan,para pengunjung cukup mengarahkan cursor pada gambar atau text,kita sudah dapat mengarahkannya pada link atau laman yang ingin kita tunjukkan.untuk membuatnya ikuti langkah dibawah ini :

1. Login ke Blogger
2. Saat di dasbor pilih edit tamplate/tata letak
3. Lalu pilih Edit HTML
4. kemudian Cari Kode ini ]]></b:skin>
5. Setelah ketemu,Copy Code Dibawah ini dan Taro Diatasnya

/*---------- 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/AVvXsEjMLIvMe70mvyzL361jff9mjSlr9vwRj4_zKreAkEne5nqpjksp5tdG94m0LJGUiLbrFLuyQVMD9R2oI1P8Tgxw-jt-fjJ2gF0Ljw_At5xJ4cCwupGNyv5arE4PD8iz3aNLSk_EUR8Bmg0/) 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/AVvXsEgrWA4eUhOAi-78FtA5Ihbn-SlAqxwwnmHhOJase8_VU3bmZN3ZM4rz6b67uT_4DjHBGy3Qp3eG3hDFcxDZwEnvY5QK-MrRuYBjxCnBfhP8kApGfUOprKif68_-gchWICAOz-BRWBb09LM/) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLIvMe70mvyzL361jff9mjSlr9vwRj4_zKreAkEne5nqpjksp5tdG94m0LJGUiLbrFLuyQVMD9R2oI1P8Tgxw-jt-fjJ2gF0Ljw_At5xJ4cCwupGNyv5arE4PD8iz3aNLSk_EUR8Bmg0/) no-repeat bottom; }

6. Jika Sudah Selesai,Klik Simpan Template

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></span></a>

Hasilnya Akanterlihat seperti ini :

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 pink adalah keterangan tambahan yang ingin anda tambahkan.

Ahir kata Selamat Mencoba,semoga bermafaat ,Sumber artikel Kumpulan Informasi Maya