Cara membuat tooltip di blog

Sering sekali saya mengunjungi blog-blog para master, dan ketika saya menyorot link atau menu mereka ada tittle yang sangat indah contoh seperti ini

Cara membuat tool tips di blog

Cara Memmbuat TOOLTIP

Apabila sobat blogger berniat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini..dan letakan diatas kode ]]></b:skin>

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

Ket :

background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna merah

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan  sobat blogger mania. jika sudah selesai jangan lupa simpan template
Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>
 

   
Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya maka tooltips-nya tidak akan berfungsi...  


Contoh Pengunaannya... yang digunakan pada widget HTML/Javascripts.. (bisa juga sobat gunakan pada postingan  

<li><a href='http://fajar7siblings.blogspot.com/2011/08/cara-memperlebar-kolom-dan-halaman-blog.html'>Cara Memperlebar Kolom dan Halaman Blog</a><div class="tooltips"><p>   Cara Memperlebar Kolom dan Halaman Blog</p></div></li>

Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian widget artikel menu education for all di sebelah kiri Blog ini..