mtasolutions


Kali ini sy ingin berkongsi cara membuat bubble tooltips pada blog seperti gambar diatas. Apabila mouse digerakkan pada link, bubble tersebut akan keluar. Untuk mencuba demo try http://pastehtml.com/view/1cd2sok.html. Caranya mudah sahaja dan kodingnya tidaklah panjang sgt seperti tooltips yang lain. Ada byk jenis tooltips yang ada. Sy akan kongsikan pada posting akan datang.

1 Pergi ke Dashboard > Design > Edit Html

2 Backup Template.

3 Cari </head> dan pastekan koding dibawah sebelum </head>

<style type='text/css'>
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/AVvXsEhtmMRhyKZ6Y_DjJkV2huBYnyVEhwv5ywvt-YvRp3djrbxndVeVlgf26_XK4JxvWWIIkDWmC-oKs2T8Atip21QiIWJ8EouoS49Ne2Kg0HTJ19ovjvhIAp5Y0eA2WNiLXtTtGokdNyMTptvd/) 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/AVvXsEizZ_1itlaedEgHIykkwJzruE-XRGyxqemx7F3RayhoYDBIsRNrn_1EIsyfaTX8DfNTGZ4AG2TxfpubOuInJxeKQN4ByYV679yRWFGhdCA9uhJCLkEfYKLEuDkkXYUHaw9ssiQMqCsMdqHp/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmMRhyKZ6Y_DjJkV2huBYnyVEhwv5ywvt-YvRp3djrbxndVeVlgf26_XK4JxvWWIIkDWmC-oKs2T8Atip21QiIWJ8EouoS49Ne2Kg0HTJ19ovjvhIAp5Y0eA2WNiLXtTtGokdNyMTptvd/) no-repeat bottom;
}
</style>

4 Untuk membolehkan link mengeluarkan bubble sebegitu setiap link hendaklah diubah menjadi seperti dibawah
<a href="Link Anda" class="tt">Nama Link<span class="tooltip">
<span class="top"></span>
<span class="middle">Mesej Pada Bubble</span>
<span class="bottom"></span></span></a>

5 Ubahkan Link Anda, Nama Link dan Mesej Pada Bubble.

Contoh
<a href="http://syoknyerblogging.blogspot.com/" class="tt">SyoknyerBlogging<span class="tooltip"><span class="top"></span><span class="middle">Belajar Blogging Dalam Bahasa Melayu</span><span class="bottom"></span></span></a>

Demo http://pastehtml.com/view/1cd2sok.html










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Khamis, 16 Disember 2010

2 ulasan

  1. Mrs Nurul Says:
  2. COMEL SEHH

     
  3. Thalhah Amir Says:
  4. tima kasihh.. kih3..

     

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com