Cara Membuat Menu Hover

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.

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/AVvXsEi2pJTcL_LWdXlh_OIuiIf2P0lxLlRYrbOJ1oMx-zOn4SjZZvdB6QPf9twIa2pARxqrAyEFoQf8_z3Sd36mJhlYr0bcFYHRgrXxGGfvzmu0WBguow8BylNwfTyvf-Ff_FOpei2YUAMf3nqt/) no-repeat center center;
}
.menu li em {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjga8_vduC4cnY1iqDrskf19bP67hWbRnW10VvYSDPa2G1O62M6MW4ofqrNNx8OHSIbRpYqRt2sM_9hryiM2qQPK9MPf9sT-7oQH3IihYagIuRlkQWEDz1BMIVlyPMA6WW_pR6aMEVXZ3-/) 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.