AABI‍TALITA BLOG
12.06.2012

Cara Membuat Menu dan Submenu Horizontal Dibawah Header Blog

Hai sob..apa kabar? pada kesempatan ini kembali saya akan coba berbagi seputar tutorial blog berkenaan dengan menu navigasi atau menu horizontal yang akan kita pasang dibawah header blog.

Hampir semua template standard yang berbasis wordpress maupun blogger sudah dapat dipastikan selalu dibakali dengan menu horizontal.hal ini dikarenakan keberadaan menu tersebut dinilai penting untuk memudahkan setiap pengunjung web/blog melihat setiap konten yang disajikan dalam sebuah web/blog disamping memperindah tampilan tempalte tentunya.tampilannya ada yg biasa biasa saja ada juga yang terlihat lebih menarik dan atarktif.jika sobat sedang mencari kode menu horizontal yang pas buat web/blog sobat mungkin totorial berikut bisa sobat jadikan referensi untuk menghiasai blog sobat.


  klik gambar untuk memperbesar

Seperti contoh gambar diatas menu horizontal  ini memiliki sub menu horizontal juga,nah jika sobat ingin mencobanya berikut langkah penerapannya :

1. Masuk dulu ke Dashboard atau ke akun blogger sobat.
2. Terus pilih Layout  dan  Edit HTML
3. Sebelumnya ada baiknya sobat  Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>  

Kode 1:
.wow-menu { background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x; position: relative; margin: 0; padding: 0; } ul#nav { border: 1px solid #cfcfcf; background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x; position: relative; font-size: 14px; font-family: helvetica, arial, sans-serif; list-style: none; margin: 0 auto; padding: 0; width: 979px; } #nav ul { margin: 0; } :focus { outline: 0; } *html ul#nav { clear: both; height: 1%; } ul#nav li a { display: block; float: left; text-transform: uppercase; font-weight: bold; line-height: 33px; padding: 0 13px 0 10px; color: #333; text-decoration: none; background: url(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/s400/menu-rule.png) right 2px no-repeat; } *html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } *:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } ul#nav li a:hover, ul#nav li a.open { color: #fff; } ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; } ul#nav li#link-naruto a:hover, ul#nav li#link-naruto a.open { background: #8E8E8E; } ul#nav li#link-games a:hover, ul#nav li#link-games a.open { background: #B20000; } ul#nav li#link-cerita a:hover, ul#nav li#link-cerita a.open { background: #12127D; } ul#nav li#link-health a:hover, ul#nav li#link-health a.open { background: #008E00; } ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; } ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; } ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; } ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; } ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; } ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; } ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; } ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; } ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; } ul#nav li#link-home a { padding: 0 33px 0 10px; text-indent: -9999px; background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right 0px no-repeat; } *html ul#nav li#link-home a { padding: 0; width: 43px; } ul#nav li#link-home a:hover { background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; } /* Sub-Vertical Navigation */ ul.sub-nav { position: absolute; top: 33px; left: -1px; overflow: hidden; width: 980px; display: none; z-index: 999; list-style: none; padding-left:0px; } ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; } ul#nav li#link-naruto ul.sub-nav { background: #CCCCCC; } ul#nav li#link-cerita ul.sub-nav { background: #1919B3; } ul#nav li#link-games ul.sub-nav { background: #FF0000; } ul#nav li#link-health ul.sub-nav { background: #00CC00; } ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; } ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; } ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; } ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/s400/technology-subnav-bgd.png) top left repeat-x; } ul#nav li ul.sub-nav li { float: left; } ul#nav li ul.sub-nav li a { float: none; background: none; font-size: 13px; text-transform: none; color: #fff; line-height: 25px; } ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; } ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; } ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; } ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; } ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }


6. Selanjutnya cari kode </head> dan pastekan kode dibawah ini diatas kode </head>


Kode 2:
<script src='http://wow-menariknya.googlecode.com/files/jQuery%20Colorful%20Pack.js' type='text/javascript'/> <script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-jcrousel.js' type='text/javascript'> </script> <script src='http://wow-menariknya.googlecode.com/files/WOW-Menariknya-clorful-menu.js' type='text/javascript'/>

7. Kemudian sobat cari kode yang mirip seperti kode berikut


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Abitalita Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML22' locked='false' title='' type='HTML'/>
</b:section>
</div><!-- end header-wrapper -->
 
Jika sudah ketemu pastekan kode berikut dibawah  </div><!-- end header-wrapper -->

<div class='wow-menu'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='http://abitalita.blogspot.com/'>Home</a></li>

  <li class='top-link' id='link-health'><a href='URL'>Kesehatan</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Diet</a></li>
                    <li><a href='URL'>Fitness</a></li>
                    <li><a href='URL'>Food Healthy</a></li>
                   <li><a href='URL'>Body</a></li>
                    <li><a href='URL'>Nutrisi</a></li>
                    <li><a href='URL'>Jantung</a></li>
                    </ul>
                </li>

                <li class='top-link' id='mbt'><a href='URL'>Blogger</a>
                    <ul class='sub-nav'>
                    <li><a href='URL'>CSS</a></li>
                    <li><a href='URL'>Widget</a></li>
                    <li><a href='URL'>jQuery</a></li>
                    <li><a href='URL'>Tutorial Blog</a></li>
                   <li><a href='URL'>Tips Blog</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='URL'>Love</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Love Tips</a></li>
                    <li><a href='URL'>Marriage</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='URL'>Unik Aneh</a>
                    <ul class='sub-nav' style='display: none;'>
                     <li><a href='URL'>Design</a></li>
                    <li><a href='URL'>Animals</a></li>
                    <li><a href='URL'>Tech</a></li>
                    <li><a href='URL'>Nature</a></li>
                    <li><a href='URL'>Inspiration</a></li>
                   <li><a href='URL'>People</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='URL'>Beauty</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Skin</a></li>
                    <li><a href='URL'>Hair</a></li>
                    <li><a href='URL'>Tips</a></li>             
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='URL'>Resep</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Breakfast</a></li>
                    <li><a href='URL'>Cake</a></li>
                    <li><a href='URL'>Chicken</a></li>
                    <li><a href='URL'>Soup</a></li>
                    <li><a href='URL'>Meat</a></li>
                   <li><a href='URL'>Seafood</a></li>
                  <li><a href='URL'>Pasta</a></li>
                  <li><a href='URL'>Drink</a></li>
                <li><a href='URL'>Dessert</a></li>
                <li><a href='URL'>Bread</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-games'><a href='URL'>Games</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>PC</a></li>
                    <li><a href='URL'>PS2</a></li>
                    <li><a href='URL'>PS3</a></li>
                    <li><a href='URL'>Cheat</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-cerita'><a href='URL'>Cerita</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>Cerita Lucu</a></li>
                    <li><a href='URL'>Cerita Seram</a></li>
                    <li><a href='URL'>Cerita Motivasi</a></li>
                    </ul>
                </li>

<li class='top-link' id='link-naruto'><a href='URL'>Naruto Episode</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='URL'>New Episode</a></li>
                    <li><a href='URL'>Naruto 284</a></li>
                    <li><a href='URL'>Naruto 283</a></li>
                    <li><a href='URL'>Naruto 282</a></li>
                    <li><a href='URL'>Naruto 281</a></li>
                    </ul>
                </li>
<li class='non-vertical-link top-link' id='link-top10'><a href='URL'>Community</a></li>
                  <li style='clear: both;'/>
 </ul>
</div>

Keterangan :
- Ganti  http://abitalita.blogspot.com dengan alamat blog sobat
- Ganti tulisan URL dengan Url link yang dituju.
- Kode diatas diambil dari blog 'wow menariknya' untuk lebih lengkap sobat bisa lihat disini

8. Terakhir simpan template sobat.

Demikian cara membuat menu horizontal dibawah header blog semoga bermanfaat.

42 komentar

Top postingannya sob...saya save dulu sob, sekalian butuh banyak belajar. Baru ganti template ya sob....

Silahkan sob..saya pun masih harus banyak belajar sob..trim sudah meluangkan waktunya untuk berkunjung :)

Kunjungi Balik Gan
sapiterbangs.blogspot.com

Terimakasih gan infonya..sudah aku pakek gan
kunjungi y http://faridelly.blogspot.com

sama sama gan,trims sudah berkunjung

gan silahkan berkunjung di blog ane yang baru blog lama di del ama blogger :(

mas kalau mau pasang kategori, entri populer, fanpage facebook tersembunyi sprti di blog mas aulia gmn cara nya.. sy pengen banget pasang di blog sy biar rapi juga kyk blog mas ini .. thanks sblmnya :) resep-dan-tips.blogspot.com

untuk memasang widget tersembunyi mbak harus memasang dulu menu accordion kemudian masukan semua widget kedalam menu accordion,untuk pembuatannya mbak tinggal cari aja di google banyak kok :) atau bisa juga baca yang ini http://abitalita.blogspot.com/2013/01/membuat-menu-accordion-dengan-jquery.html.. terima kasih sudah berkunjung :)

blognya mantep sob kunjungi juga yah jahetbungas.blogspot.com

mantaff gan bisa langsung praktek nich

silahkan sob trims sudah berkunjung :)

nambah ilmu nih, psotingan ku juga ada yang bertema tentang menu bar.
di tunggu kunjungannya ya mas.. :d

mantab gan salam kenal http://idegemilang.blogspot.com/

salam kenal balik sob....

Waduh mumet juga ya blog ane gini aja dech http://ironfxib.blogspot.com

Terimakasih sebelumnya.. sangat bermanfaat.. sekalian mau tanya gan.. kalo sub menunya kebawah bisa ngga ya gan.. itu kan kesamping..? mohon bantuanya..
:)

Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

mantap gan, meskipun gw capek nyari tempat naruh kode html yang ke 3 di templat blogger yang baru, izin publish dan previkasi di blog gw ya gan utk membuat menu header dropdown di tempalat baru blogspot. :) (h)

makaseh bang info'a

akhirnya bisa juga saya pasang di blog

ia mas sama sama.sukurlah kalo gitu :)

Thanks yah http://ilhamshare301.blogspot.com

Weh, ini yang dicari.. Terima kasih ya..

ok mas sama sama,terima kasih sudah mampir.. :)

permisi Mau nanya... cara memperpendak panjang dari menu itu gimana yah... ??
soalny di blog saya, menunya kepanjangan...
hehe.. tolong pencerahannya.. :D

kalau mau liat blog saya... silahkan liat disini :D
http://rachmatmimin.blogspot.com/

tinggal diubah css "width:979px" disamakan dengan lebar tempaltnya sob.. :)

Wah makasih Aulia... :D ini sangat membantu sekali :D
sya blum prnh bljar pemrograman web jdi blum tau syntaxny .. hehe.. sekilas info :D

Sekali lagi makasih :D

ia sama2 mas, saya juga lagi belajar :-)

gan misi ane mau coba ya....
baru belajar ngeblog niech tapi belom paham bener tentang blog...
hehe gk papa ya....

ia silahkan mas..sama sama saya juga masih belajar kok :D

Keren postingannya. Sekalian referensi tugas dari dosen.

oke mas,senang bisa mampir disini :)

om..kok menu ane ga bisa keluar sub menunya ya, harusnya kalo di hover keluar sub menunya kan
bagus sih, cocok ama tema blog ane :p

ia mas seharusnya bisa keluar tu,mungkin ada yang kelewat waktu penerapannya, coba diulang lagi aja :)

itu yang cara nomor 7,gak ketemu kodenya pak?gimana terus?

Terima Kasih Informasi Caranya.
Bermanfaat sekali buat Blog saya :D

bagi pemula seperti saya agak ribet nih, tp perlu dicoba juga ya,

trimakasih gan informasinya bagus bgt :D :D

sekedar shering ajja sana agan" bagi yang lagi susah ngurus" surat" penting sprti sim,stnk,bpkb,dll ane nemu tempatnya tinggal milih dibawah nih gan
biro jasa stnk
biro jasa sim
biro jasa bpkb
biro jasa perizinan

masih bingung gan..
maklum masih baru di blogspot

thanks gan, working tips nya...
kalo mengatur panjangnya menu bar gimana gan??

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.