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/AVvXsEjpLjH_kqweE3a2kDGXLtSjP7A-Dqtg7HUp9EkAOJUnk85S3rTMp0y4oaCQA66pwqHza8mF1C7YgVh1BbAFauyUwDdrnbTU5YXlb43HueZBt_SOUbSCG3O1CUYGY9bAtHemN4eyr1L-ryI/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/AVvXsEi28fbqmvREziYDE8BU9lCJ8oYAfhsXqCc5UT2H2v6mSFMK7hqZ0ZCxTvdxFENtAkJOohu0Xws-pjuUCjR3KrgniVQg9_R6fPzEf-P2EJZvAhMLbHWGHUeD9j1FUh9Mw5yy-ZuHQOjR-I8/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/AVvXsEjpLjH_kqweE3a2kDGXLtSjP7A-Dqtg7HUp9EkAOJUnk85S3rTMp0y4oaCQA66pwqHza8mF1C7YgVh1BbAFauyUwDdrnbTU5YXlb43HueZBt_SOUbSCG3O1CUYGY9bAtHemN4eyr1L-ryI/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!!