Membuat Booble Tooltips ( Keterangan Pada Tulisan )

Tooltip adalah tulisan yang muncul ketika kursor berhenti diatas link/Tuisan yg diberi tooltip atau semacam Keterangan dan penjelasan , Untuk Lihat Contohnya, silahkan Klik disini dan Arahkan Kursor anda Ke bacaan IMAM WIDIANTO !!Gimana sob?? Udah Liat Belum??
hhee, Blog'a ancur y ?? Okeh, Weekend ini , enaknya kita berbLogger ria dengan Tips-Tips Baru ,,!! Dan Untk Membuuat ItuKita dapat memudah kan Pengunjung Untk Membaca suatu Penjlasan Mungkin,!! ini caranya :

Sebelumnya, Copy css dibawah ini :
/*---------- bubble tooltip imam77.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/AVvXsEjz8xjXVUSg2q6WotDzBO1ytXFHCsvIT9ADZLjVpJuJpIkOxO-Qe-ShR9Jhxj29_PC7ns0CoWY2qEhj31yHVyGRQMKoiBTeDBIsIIIbbaz7Zu_4GaDWFYaOikrzTu2s1svfuagTJ3WMqFQ/s320/bubble-712378.gif) 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/AVvXsEiRtouaTCnOcVGJh7BwuanNUXuQ5EzJLVVfYb7xgtt9FjqTuAXd1PWXOdWfox6IvohWK-dRRWxnCZnbMtm6huTmo4tTVRNP_fod9wSrYpxW4emFykY8NhBXEH2UzGUjhyxNKDxzBTKUY3M/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8xjXVUSg2q6WotDzBO1ytXFHCsvIT9ADZLjVpJuJpIkOxO-Qe-ShR9Jhxj29_PC7ns0CoWY2qEhj31yHVyGRQMKoiBTeDBIsIIIbbaz7Zu_4GaDWFYaOikrzTu2s1svfuagTJ3WMqFQ/s320/bubble-712378.gif) no-repeat bottom;
}


Nah setelah di copy selanjutnya login blogger >> tataletak >> edit html >> cari tag ]]></b:skin> paste code css yg udah di copy tadi di atasnya dan save Template. Untuk format penulisan link pada posting yg di beri tooltip seperti ini

<a href="#" class="tt">nama link disini<span class="tooltip"><span class="top"></span><span class="middle">keterangan atau tulisan pada tooltip disini</span><span class="bottom"></span></span></a>


Nah, Selamat Mencoba ia???
Jangan Lupa Comment'a!!