Macam mana nak buat horizontal drop down menu bar?

Semalam di ruangan shoutbox seorang blogger dengan nickname lovely kitchen ada tanya, macam mana nak buat horizontal menu bar macam AVE. Memandangkan AVE pun dah lame tak buat entri melibatkan tutorial, jadi ini dia cara nak buat horizontal menu bar.


STEP 1
Copy kod dibawah



<div id='NavbarMenu'> <ul id='nav'> <li><a href='http://www.akalemosi.com/'>Home</a></li> <li><br /> <a href=''>About Me</a><br /> <ul> <li><a href='http://www.akalemosi.com/2010/10/penghulu.html'>Contact Me</a></li> <li><a href='http://www.akalemosi.com/search/label/kisah%20penulis'>Kisah Penulis</a></li> <li><a href='http://www.akalemosi.com/2010/11/disclaimer.html'>Disclaimer</a></li> </ul> </li> <li><a href=''>Cinta & Perhubungan</a><br /> <ul> <li><a href='http://www.akalemosi.com/search/label/relationship'>Relationship</a></li> <li><a href='http://www.akalemosi.com/search/label/info%20lelaki'>Info Lelaki</a></li><li><a href='http://www.akalemosi.com/search/label/info%20perempuan'>Info Perempuan</a></li> <li><a href='http://www.akalemosi.com/search/label/fakta'>Fakta</a></li> </ul> </li> <li><a href=''>Turtie</a><ul> <li><a href='http://www.akalemosi.com/search/label/KOMIK'>Komik</a></li> <li><a href='http://www.akalemosi.com/search/label/VIDEO'>Video</a></li> <li><a href='http://www.akalemosi.com/search/label/info%20turtie'>Info Turtie</a></li> </ul></li> <li><a href=''>Tips</a><br /> <ul> <li><a href='http://www.akalemosi.com/search/label/tips%20fesyen'>Tips Fesyen</a></li> <li><a href='http://www.akalemosi.com/search/label/Tutorial%20blog'>Tutorial Blog</a></li> <li><a href='http://www.akalemosi.com/search/label/pengurusan'>Pengurusan</a></li> </ul> </li> <li><a href='http://www.akalemosi.com/search/label/kesihatan'>Kesihatan</a></li><li><a href='http://www.akalemosi.com/2010/10/sitemap.html'>Sitemap</a></li> </ul> </div>





STEP 2 
Paste kod tersebut dinotepad/ microsoft word kemudian edit bahagian yang tertentu mengikut halwa mata anda.

*sila rujuk pada main tab AVE untuk memudahkan kerja edit anda. ada 'href' yang sengaja ditinggalkan dengan ''. Jika ingin user direct ke page tertentu, letakkan saja link pada ''.




STEP 3
Selesai edit, kemudian copy kod tersebut.




STEP 4
Pergi ke Design >> Click Edit HTML >> Download full template (backup) >> cari <div id='NavbarMenu'> menggunakan ctrl+f .


*Sekiranya kod tersebut tiada, cari kod ini <div id='content-wrapper'> dan paste kod dibawah diatas kod ini <div id='content-wrapper'>



STEP 5
Paste kod tersebut dan letakkan di bahagian bawah <div id='NavbarMenu'>. Preview dan jika semuanya ok, tekan save.


Selamat beramal! :)




Untuk lain-lain design horizontal tab, boleh lihat disini.
http://bdlab.blogspot.com/2011/01/17-drop-down-menu-widget-in-blogger.html
dan juga
http://tutorialuntukblog.blogspot.com/2011/06/tutorial-buat-tab-menu-navbar-menu.html

Posted in: Tutorial blog