Membuat Menu Navigasi Dengan ToolTip

Diposkan oleh Hery Prasetyo Thursday, May 13, 2010
بسم الله الرحمن الرحيم

Menu Navigasi pada blog sangatlah diperlukan bagi kebanyakan blogger profesional. di tambah dengan fungsi ToolTip menjadikan tampilan ini lebih profesional dan fungsional.
Membuat Menu Navigasi Dengan ToolTipPada 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> :

<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>

- 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(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.

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>

- 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.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

36 Responses to Membuat Menu Navigasi Dengan ToolTip

  1. Rock Says:
  2. Aku simpan dulu sob...
    Thanks.

     
  3. aryadevi Says:
  4. pagi hari, di balikpapan hujan nih,...ok teman kami jaring ^_-^

     
  5. aku simpan artikelnya y,bang
    salam hangat dari blue

     
  6. Ega-Priatma Says:
  7. Wah... JOOOOOSSSSSS banget infonya.

     
  8. Tutorial yang mantap sobat...
    Dapat ilmu baru lagi.

     
  9. Bang Iwan Says:
  10. Bookmark dulu ah..
    makasih banyak

     
  11. buwel Says:
  12. thanks sob, satu kata.. muantab!!!

     
  13. achen Says:
  14. kwerrrrennn!!

     
  15. alfi Says:
  16. mantep mas...

     
  17. Darin Says:
  18. tambah mantap aja ni mas tipsnya :) ok, saya bookmark dulu, siapa tau berguna.
    salam hangat.

     
  19. HAPIA Mesir Says:
  20. ALL@ silahkan sob..semoga bermanfaat....

     
  21. Bunglon Blog Says:
  22. asalamualikum...
    wah dari demonya kren sob sistem in out gitu yach...menarik nech
    bookmark dl ya sob
    Sukses Slalu!

     
  23. Nugraha Says:
  24. Woow.. indah banget,sob. Saya baru menemukan menu nav seperti ini.

     
  25. kak zen Says:
  26. nicw tutorial mas.semoga bermanfaat buat semua.
    salam

     
  27. Beben Says:
  28. keluar lagi deh jQuerynya...xixixixi
    ternyata suka maen ke web2 developer jg nih master Hapia Mesir
    mantap!!!

     
  29. mak html aja nggak ngerti kak apalagi jquery

     
  30. mantap tutorialnya pak

     
  31. kesebelah dulu pak ke artikel islami

     
  32. mas doyok Says:
  33. tap[i kalau gak terload sempurna tooltip nya gak jalan dan icon blognya muter muter terus , makanya ane jarang pake script tambahan mas hehehe

     
  34. wah..
    kok akhir2 ini banyak yang posting ttg navigasi ya?

     
  35. aanku91 Says:
  36. oke brow... menunya unik.. siip!

     
  37. HAPIA Mesir Says:
  38. 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

     
  39. NURA Says:
  40. salam sobat
    tutorial mantap,
    saya nanti akan mencoba buat.

     
  41. Abdul Hafizh Says:
  42. Wah,, ada script tambahan lagi ... ;)
    Keren ..!

     
  43. the others Says:
  44. Mampir utk menimba ilmu lagi disini...
    Thanks for sharing.. ^_^

     
  45. :D,,,
    selalu kreatip dengan jquerynya :)

    salam hangat
    dari blogger abnormal

     
  46. iswady Says:
  47. blognya semakin mantap aja

     
  48. hebat ini tips nya mas...selalu ada inovasi didalam mendisain blog..trims mas

     
  49. Situs Gugle Says:
  50. nyasar di tempat yang tepat
    bagus-bagus triknya sob,

    salam kenal ya

     
  51. yusrond Says:
  52. kerreeeend navigasinya .
    pake' jquery . ntar mo tak coba .
    (insya allah..) :)

     
  53. Rizky2009 Says:
  54. keren tp kok puanjaaaaaaaaang bgt yah master scriptnya

     
  55. van Says:
  56. gilaaa,,
    nyoba demonya kerenn tenan bradeerrr

     
  57. ogan lee Says:
  58. teng Q sangat tuk infonya, sangat bermanfaat...

     
  59. Andri Says:
  60. Thanks bro.... keren abis tutorialnya

    http://greatzine.blogspot.com

     
  61. Bang Adhie Says:
  62. tambah pengetahuan tambah betah di depan komputer

     
  63. Terima kasih mas mesir...hehehe...berhasil kuterapkan.....

     

Post a Comment