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:
6. Selanjutnya cari kode </head> dan pastekan kode dibawah ini diatas kode </head>
Kode 2:
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>
<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.
40 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 :(
siap gan :D
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)
silahkan gan.. :)
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,
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.