Script Bubble Tooltip di Blog


Kali ini saya akan membahas bagaimana cara membuat bubble tooltip diblog.
Salah satu kegunaannya adalah kita dapat menghemat ruang blog kita dengan memasang bubble tooltip tersebut , kita tidak perlu menampilkan segala informasi yang ingin kita tampilkan kepada para pengunjung / pembaca blog kita , cukup mengarahkan cursor pada gambar atau text karena kita sudah mengarahkan pada link atau laman yang ingin kita tunjukkan.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode ]]></b:skin>
6. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>
7. Klik simpan template
/*---------- bubble tooltip by dhecun.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(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top; 
} 
a.tt:hover span.middle{ /* different middle bg for stretch */ 
display: block; 
padding: 0 8px; 
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom; 
} 
a.tt:hover span.bottom{ 
display: block; 
padding:3px 8px 10px; 
color: #548912; 
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom; 
}
Selanjutnya untuk membuat teks yang memiliki bubble tooltip , silahkan copy kode di bawah ini dan masukkan ke setiap artikel yang anda inginkan :
Klik <a class='tt' href='http://dhecun.blogspot.com'>di sini<span class='tooltip'></span><span class='top'/><span class='middle'>untuk konfirmasi</span><span class='bottom'/></span></span></a>
Keterangan :
1. Link warna merah bisa anda gunakan untuk membuat link ke arah artikel lain , bisa juga di kosongkan jika tidak diperlukan.
2. Link warna biru adalah teks yang akan di buat bubbletip , bila disorot oleh kursor mouse maka akan muncul keterangan tambahan yang telah anda buat.
3. Link warna pink adalah keterangan tambahan yang ingin anda tambahkan.

Hasilnya seperti gambar dibawah ini :


Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge