Menu Navigasi Dengan Tooltip

1.Silahkan Login Ke Blogger
2.Pada Dasbor Klik Tata Letak
3.Klik Edit Html
4.Klik Expand Template Widget
5.Kemudian Letakan Code Di bawah ini sebelum code </head>

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

-Copas Lagi Code berikut ini dan letakan di bawah code di atas

<script type='text/javascript'>
$(document).ready(function(){

$(".menu2 a").append("<em></em>");

$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>

6.Masukan Code Css Berikut di atas code ]]></b:skin>

.menu2 {
margin-top: -17px;
padding: 0;
list-style: none;
}
.menu2 li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu2 a {
padding: 14px 10px;
display: block;
color: #CCF2FF;
width: 136px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50z-sLvKgDd3VBQrdAmn_o-f2wHkuwJH9GGj5NAb6LA41HLh5JPozU2MyDnWy7IK5yFH2tw4OADr7DHYbYavpRAe3RUq8bBVkG9rc10bytipsI0pBoon0TT3cw16vG0LcxpRxbQW6MVc/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFTUh30xOjolSjQaKF_fICLG-1FSgrm-NBdWUk9oe6h_tJ4y-dYX3Ike4o5KTyYpV_1iPYRugcxzBNesPJXGL3e_cVey-V3tNyk0lcOgfQ21UIfftJpspWH04TPEXPt0FBYXCWHeLnznA/s320/black_arrow.png) no-repeat;
width: 180px;
height:35px;
position: absolute;
top: 25px;
left: -25px;
text-align: center;
color:#fff;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

-Simpan Template

7.Langkah terakhir klik Add Gadget ->> Html javascrip dan letakan code berikut di bawah Header Elemen Halaman anda

<ul class="menu2">
<li>
<a title="Go to homepage" href="/">Home</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Tutorial</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">JQuery Widget</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">CSS Editing</a>
</li>
</ul>

Ket:

-Menu2 adalah Class Menu Navigasi ini
-em adalah Class Toltip
-Menu2 Li em adalah Code Tampilan Toltip
-Margarin Top:-17px adalah jarak atas menu navigasi

Jika Sudah Klik Simpan
Sumber Artikel jQuery Tutorials for Designers

ARTIKEL TERKAIT

JQuery

• Data Atribut Dalam Html Dan Jquery
• Simple Navigation Rocketbar With Jquery & Css3
• Jquery Slick Tab Menu
• Different Top Navigation With Jquery
• Vertical Sliding Panel Menu With Jquery
• Mosaic Slideshow With Jquery dan Css
• Slide Panel For Blog
• Jcarousel Dengan Jquery