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
Gadget
Jika anda sukakan article ini,linkkan kembali...
COMEL SEHH
tima kasihh.. kih3..