Buble toltip merupakan suatu teks yang di lihatkan jika mouse menyentuh link seperti gambar diatas.
Demo :
Mau ? langsung saja.
Cara
Login ke blog kamu > Pilih Rancangan > Pilih EDIT HTML > centang Expand Widget >
Cari kode ]]></b:skin> Memakai ctrl+f untuk memudahkan.
Setelah ketemu letakan kode dibawah ini tepat diatas kode ]]></b:skin> tadi.
/* Start bubble tooltip by plustutorial.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QOOUJ368-1AZzXxNxCtcnnZf7sBh4QkW5i20GtiShb1svPSggQycdMJkVNpyyL031vDo3x8sf6ScY6uZ7GigDcbja9jObtbV0elaQCWnsNPRghcpbaq8-5eMSGNtspGdTLkpodjFqfA/) 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/AVvXsEivEku-EAy1BZNOVuiymmqww6Mc2anTcicezvuQuQTrv4iJFy3lwJrGtenYv1LEtYGNAYPwsDmHKQmrcTJ4_ffoRrJhGg6uzcNP4PyYl_ihzzPbKEyKo1ursEEJdgKC-CaOcWq4seixX0c/)repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QOOUJ368-1AZzXxNxCtcnnZf7sBh4QkW5i20GtiShb1svPSggQycdMJkVNpyyL031vDo3x8sf6ScY6uZ7GigDcbja9jObtbV0elaQCWnsNPRghcpbaq8-5eMSGNtspGdTLkpodjFqfA/) no-repeat bottom;
}
/* End bubble tooltip by plustutorial.blogspot.com */
Selanjutnya Simpan templatenya.
Langkah terakhir untuk mengaktifkan Tooltips pada suatu link cukup gunakan kode dibawah ini.
<a class="tt" href 'Alamat Link yang dituju'>
text untuk link
<span class="tooltip"><span class="top"></span><span class="middle">
Text untuk tooltip
</span><span class="bottom"></span></span>
</a>
Selesai Mudah bukan ?? Semoga bermanfaat
Silahkan Komentar NO-SPAM dan Memasukan Link Aktif, Anda Dapat Memasukan Tag Pada Form Komentar ini, diantaranya :
[pre] Tag untuk kode css/html di sini........ [/pre]
[blockquote] Tag blockquote di sini.......... [/blockquote]
[img]Tag untuk URL Gambar anda disini.. [/img]
Anda-pun juga dapat memasukan kode Emotion seperti Biasa.