Menu Navigasi pada blog sangatlah diperlukan bagi kebanyakan blogger profesional. di tambah dengan fungsi ToolTip menjadikan tampilan ini lebih profesional dan fungsional.
Pada tutorial sebelumnya, HAPIA Mesir pernah memostingkan tentang beberapa model menu navigasi yang berbeda-beda, diantaranya : Membuat Menu Navigasi Dengan JQuery dan Membuat Navigasi Stylish Di Blog. semua navigasi ini menggunakan JQuery masing-masing dan berbeda-beda.Berikut adalah demo dari menu navigasi dengan tooltip :
Cara membuat menu navigasi dengan tooltip adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah <head> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :
<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>
$(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>
- Masukan code CSS berikut dan letakkan diatas ]]></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/AVvXsEhouHymvUBQMLA_W2eb95BfpUG4rMPPIt51FbkAPSyejNyOX175xy9WhQySIsz9JuMVjt6fIcUJVoQqX-OVQiqOfsWmu4S7HXNdb8gDjMvhRoxm-JW6B2QxPrXMAvFuLDKXszH7-iJuRr8/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXHAKFXiH5KcJZX-gCwruUkDH3MIizx4HXfm9g8VNSzAUC2V63LlMHcNMRT5xy2HZs4I0pUsekCnA7uswAmAfG1giEo6choUGuqFoacnHlTLbi0RsNbyvYQfVX5CNn0sT012jnhn5Do0/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;
}
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/AVvXsEhouHymvUBQMLA_W2eb95BfpUG4rMPPIt51FbkAPSyejNyOX175xy9WhQySIsz9JuMVjt6fIcUJVoQqX-OVQiqOfsWmu4S7HXNdb8gDjMvhRoxm-JW6B2QxPrXMAvFuLDKXszH7-iJuRr8/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXHAKFXiH5KcJZX-gCwruUkDH3MIizx4HXfm9g8VNSzAUC2V63LlMHcNMRT5xy2HZs4I0pUsekCnA7uswAmAfG1giEo6choUGuqFoacnHlTLbi0RsNbyvYQfVX5CNn0sT012jnhn5Do0/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.
Untuk menampilkan menu navigasi dengan tooltip, lanjutkan langkah berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (contoh dibawah Header) :
Untuk menampilkan menu navigasi dengan tooltip, lanjutkan langkah berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (contoh dibawah Header) :
<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>
<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>
- Simpan.
# menu2 adalah class menu navigasi ini.
# em adalah class tooltip.
# menu2 a adalah menu navigasi itu sendiri.
# menu2 li em adalah code tampilan tooltip.
# margin-top: -17px; adalah jarak atas dan menu navigasi.
Untuk tutorial originalnya silahkan baca artikel dengan judul jQuery Tutorials for Designers.
Selamat mencoba dan happy blogging.
# menu2 adalah class menu navigasi ini.
# em adalah class tooltip.
# menu2 a adalah menu navigasi itu sendiri.
# menu2 li em adalah code tampilan tooltip.
# margin-top: -17px; adalah jarak atas dan menu navigasi.
Untuk tutorial originalnya silahkan baca artikel dengan judul jQuery Tutorials for Designers.
Selamat mencoba dan happy blogging.
Aku simpan dulu sob...
Thanks.
pagi hari, di balikpapan hujan nih,...ok teman kami jaring ^_-^
aku simpan artikelnya y,bang
salam hangat dari blue
Wah... JOOOOOSSSSSS banget infonya.
Tutorial yang mantap sobat...
Dapat ilmu baru lagi.
Bookmark dulu ah..
makasih banyak
thanks sob, satu kata.. muantab!!!
kwerrrrennn!!
mantep mas...
tambah mantap aja ni mas tipsnya :) ok, saya bookmark dulu, siapa tau berguna.
salam hangat.
ALL@ silahkan sob..semoga bermanfaat....
asalamualikum...
wah dari demonya kren sob sistem in out gitu yach...menarik nech
bookmark dl ya sob
Sukses Slalu!
Woow.. indah banget,sob. Saya baru menemukan menu nav seperti ini.
nicw tutorial mas.semoga bermanfaat buat semua.
salam
keluar lagi deh jQuerynya...xixixixi
ternyata suka maen ke web2 developer jg nih master Hapia Mesir
mantap!!!
mak html aja nggak ngerti kak apalagi jquery
mantap tutorialnya pak
kesebelah dulu pak ke artikel islami
tap[i kalau gak terload sempurna tooltip nya gak jalan dan icon blognya muter muter terus , makanya ane jarang pake script tambahan mas hehehe
wah..
kok akhir2 ini banyak yang posting ttg navigasi ya?
oke brow... menunya unik.. siip!
mas doyok@ iya memang begitu mas...ya itulah kosekuensi dari penggunaan script...dan hal2 yg harus me-load dari luar seperti gambar, script link luar, dll itu yg menambah load blog...
danuakbar.com@ biar rame di googlenya sob....wkwkwkwk
salam sobat
tutorial mantap,
saya nanti akan mencoba buat.
Wah,, ada script tambahan lagi ... ;)
Keren ..!
Mampir utk menimba ilmu lagi disini...
Thanks for sharing.. ^_^
:D,,,
selalu kreatip dengan jquerynya :)
salam hangat
dari blogger abnormal
blognya semakin mantap aja
hebat ini tips nya mas...selalu ada inovasi didalam mendisain blog..trims mas
nyasar di tempat yang tepat
bagus-bagus triknya sob,
salam kenal ya
kerreeeend navigasinya .
pake' jquery . ntar mo tak coba .
(insya allah..) :)
keren tp kok puanjaaaaaaaaang bgt yah master scriptnya
gilaaa,,
nyoba demonya kerenn tenan bradeerrr
teng Q sangat tuk infonya, sangat bermanfaat...
Thanks bro.... keren abis tutorialnya
http://greatzine.blogspot.com
tambah pengetahuan tambah betah di depan komputer
Terima kasih mas mesir...hehehe...berhasil kuterapkan.....