Mengenal Tooltips, mungkin sudah tidak asing lagi bagi sobat blogger semua. banyak cara dalam  memasang tooltips di blog dan berbagai macam pula menempatkan tooltips tersebut. Kali ini ane akan sedikit share tentang Tooltips Menu Hover yang mana membuat menu dengan effect tooltips di saat cursor melintas diatasnya.


Seperti apa Tooltips Menu Hover ?
mari kita lihat demo nya.

Demo Tooltips Menu HoverKlik disini untuk melihat demo Tooltips Menu Hover

Cara membuat Tooltips Menu Hover :
Langkah 1
Letakan kode dibawah ini tepat diatas kode ]]></b:skin> pada halaman Rancangan-Edit HTML akun blog sobat.

.menu {
margin:100px 10px 10px 10px;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrMWeNhsJonC3eti0IBdc6CQmAh1KC9aQczsmspZ3HcVhAcZV-8aD3ohYOdx7nZ-eRv2CU8PM5Pab1nqECek4RzCNPJIpkNJKzQAhggRDHpVFAkdM3btFIHqJ9X2cyme179aXHnW6YRI8/) no-repeat center center;
}
.menu li em {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3bhZfwjcKZozxm2EbUl9yzsW1_PMhBtdXgyaZQti-NiA1DoV_jfxir8-sSkT-fwLljM3HbvFHcZu-ZSy33XozqB3MLyeR3ctTMFBPfTOVYGItptexeOmHGKsC1sBu1Y-h-8I245DAfvN/) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Langkah 2
Pasang Framework jQuery dibawah ini pada template sobat, tepatnya pada halaman Rancangan-Edit HTML diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Jika sebelumnya sobat pernah memasang Framework jQuery tersebut pada template sobat, maka Langkah 2 dilewat saja.

Langkah 3
Letakan kode dibawah ini tepat diatas kode </head> pada halaman Rancangan-Edit HTML akun blog sobat.

<script type='text/javascript'>
$(document).ready(function(){
  $(".menu a").hover(function() {
    $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
  });
});
</script>

Langkah 4
Save template sobat dan langsung menuju halaman Rancangan-Elemen Laman.

Langkah 5
Tambahkan kode dibawah ini pada halaman Add Gadget HTML/Java Script blog sobat.

<ul class="menu">
  <li>
    <a href="URL LINK 1">MENU 1</a>    
    <em>TIPS 1</em>
  </li>
  <li>
    <a href="URL LINK 2">MENU 2</a>
    <em>TIPS 2</em>
  </li>
  <li>
    <a href="URL LINK 3">MENU 3</a>
    <em>TIPS 3</em>
  </li>
</ul>

Perhatikan kode yg dicetak besar, gantilah dengan ketentuan menu yang sobat pasang.
URL LINK [1, 2, 3,]  = Menentukan URL link yang sobat tuju.
MENU [1, 2, 3,]      = Menentukan nama pada menu.
TIPS [1, 2, 3,]         = Menentukan nama didalam Tooltips.

Langkah 6
Drah drop gadget yg sudah ditambahkan ke atas postingan, atau di header, terserah keinginan sobat.

Disarankan ditempatkan pada gadget yang memiliki width besar, agar hasilnya lebih maximal.

Langkah 7
Save template sobat dan lihat hasilnya.
Personally I dont think this is the right way to do it,
if you have better ideas to develop it, please comment !!

Selesai.
Selamat mencoba dan semoga bermanfaat.