The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

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(http://2.bp.blogspot.com/_QeR8kbaWhLU/S-szw7XJKkI/AAAAAAAAAxA/M6Wo1hjr5Yc/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S_0kQleZk3I/AAAAAAAAA0Q/q5MPjMLvULw/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



10 komentar:

joe mengatakan...

wah keren bro, dicoba coba ah

Bang Koko mengatakan...

langsung ke TKp Sob...

nice post

Tutorial Edit Blog mengatakan...

keren bro,langsung coba bos

Blogger Manado mengatakan...

nice post,

Blog Tutorial | Berbagi Untuk Semua mengatakan...

keren sob,thx ya dah berbagi

nandakrenz mengatakan...

haduh gan, ane bingung ma blog agan. coz g da shoutbox/mix buat ane comment. btw, ini kunjungan balik dari ane gan. thank's dah berkunjung tadi di blog ane. wss...

nandakrenz mengatakan...

owh, pake moderator juga toh. bagus degh. lam knal dari ane gan. wss....

Koko Bota mengatakan...

nice post....

Rizky2009 mengatakan...

keren bgt nih sob, kapan2 mau tak coba deh

Botzzz mengatakan...

@All :Thx Untuk komentarnya..:)

Posting Komentar