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/AVvXsEgwHTmn6-vQS-NLtbEZ5OLQWcuORD7HKa0DGcwTUfonzfn92Bj9Kt6_rTIeX4knnF0X6bfckT5st2q8sG7Fli-zLb6VFubQTiAFoxrclR2pPceBkfGaYfhxECAJDst368VSf1AWE_mMLmI/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/AVvXsEiR4jAassBlIahpWStu_MTsMf4VSYwII_ZgTjNj3mVp1PFGp_NgwXLH2ECdLDNYJHA9hRTsdkk3EaCHhBcdGV41RVnU_GgcOM0n3_VJbelxhm-Yge9MSDE5L6JHiWCup83ffnudC5b92Z4/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/AVvXsEgwHTmn6-vQS-NLtbEZ5OLQWcuORD7HKa0DGcwTUfonzfn92Bj9Kt6_rTIeX4knnF0X6bfckT5st2q8sG7Fli-zLb6VFubQTiAFoxrclR2pPceBkfGaYfhxECAJDst368VSf1AWE_mMLmI/s320/bubble-712378.gif) no-repeat bottom;
}


Nah setelah di copy selanjutnya login blogger >> tataletak >> edit html >> cari tag ]]> 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

nama link disiniketerangan atau tulisan pada tooltip disini


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