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/AVvXsEiAwsy1p1w3fcqsaXV9jzLr3aDMjQX40E8FwLWF-svNJm9ec49Pa6pFApVRB7bhM7PMTNESs85O3H17Z9la7kScqXhkJjbbFQPc6cSW7zybtjJTptScspyWTy5wbuB7sL0h6qVtJxq9PHs/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/AVvXsEjGm4_w94S1pKEd1HIMcdYx8lIgwNLdwSB_KUMTb2V0puh89uOypItPX6PXptSAhMvZtcXCXWhFyM8mIPU0rYcq9hFef9erwtdXu40gbpPv-pqMkmJTdcU8h5wZnbKjv9MazbUZZoakRNI/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/AVvXsEiAwsy1p1w3fcqsaXV9jzLr3aDMjQX40E8FwLWF-svNJm9ec49Pa6pFApVRB7bhM7PMTNESs85O3H17Z9la7kScqXhkJjbbFQPc6cSW7zybtjJTptScspyWTy5wbuB7sL0h6qVtJxq9PHs/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> 

Related Post