Demo Menu Horizontal
Langsung saja ya, tidak perlu basa-basi
Panduan Langkah Demi Langkah Membuat Menu Horizontal + Sub Menu Di Blogger
Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.- Panduan Untuk Blogger Baru
- Panduan Untuk Blogger Lama
Tutorial Membuat Menu Serta Sub Menu Tanpa jQuery Untuk Blogger Baru
1. Klik menu seperti ini
2. Klik menu / tulisan Template
Kode Yang Harus Di Cari / Temukan
Cari kode :<div class='main-outer'> atauSetelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
Catatan:Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)Hal-hal yang mungkin akan ditanyakan :
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
1. Kode yang harus dicari tidak ada di blog saya
Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.
2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu?
Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman.Update 21 Mei 2012
Jika susah pasang menu horizontal nya pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:
- Klik Tata Letak
- Klik Add Gadget
- Pilih Gadget Html/JavaScript
- Simpan
- Selesai
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}Kemudian tambahkan kode (width:900px) di atrara { dan }, sehingga menjadi seperti ini
#cat-nav {background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}Ingat, angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan (yang sesuai dengan template kamu), bisa juga mengganti kode 900px kode 100%
Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px dengan tinggi yang kamu mau.
Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.
Update 9 Juni 2012
Bagaimana cara menambahkan menu
Untuk menambahkan menu pada kode menu horizontal di atas silakan tambahkan kode berikut<li><a href='#'>Menu</a></li>Pasang kode di atas sebelum kode
</ul>Maka kodenya jadi seperti ini
</div>
Dengan menambahkan kode di atas itu artinya kamu sudah menambahkan 1 menu, jika ingin menambahkan dua menu maka silakan masukkan kode tambahan tersebut 2 x<li><a href='#'>Menu</a></li></ul>
</div>
<li><a href='#'>Menu</a></li>Untuk menambahkan menu yang ada sub menu nya maka silakan tambahkan kode berikut
<li><a href='#'>Menu</a></li>
</ul>
</div>
<ul id='sub-custom-nav'>Caranya sama dengan cara menambahkan menu
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
Bagaimana cara menambahkan sub menu saja?
untuk menambkan sub menu saja caranya hampir sama dengan cara menambahkan menu, silakan sisipkan kode
<li><a href='#'>Sub Menu</a></li>Sebelum kode
</ul>Sehingga jadinya seperti ini
</li>
<ul id='sub-custom-nav'>Nah itulah cara menambahkan menu dan sub menu, selamat mencoba.
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>
Update 13 Agustus 2012 Harap Dibaca
Bagaimana cara isi menu dengan artikel yang kita mau, agar lebih jelas silakan baca Cara Mengisi Menu Dengan Artikel Kita
March 2, 2012 at 2:37 PM
Ini yg aku cari, kode di blogger yg baru beda ya? Aku pke yg lama g kluar sub menunya.
Thx infonya ya. :)
March 8, 2012 at 8:08 AM
Thanks infonya yah gan ,..
senang banget rasanya pas berhasil praktekkan tricknya ,..
rasanya seperti makan cendol di siang hari bolong (:
don't stop to share ur trick yah Gan ,..
Saluuut (:
March 8, 2012 at 11:27 AM
trims yang saya cari selama ini, biasanya saya pake kode HTML berupa tambah widget...
March 14, 2012 at 7:37 AM
wahh makasih banyak banyak banyak mas hehe
March 15, 2012 at 4:01 PM
Cara ganti warna pada backgroun menu.a gimana ???
March 15, 2012 at 9:01 PM
@Erdin Suharyadi silakan edit css nya, yaitu kode #cat-nav dsd ....
March 18, 2012 at 4:04 PM
Setelah dimodif menu,sub menu termasuk ditambah,dikurangi dan diacak posisinya kok no well-formed...? pdhal posisi untuk buka/tutup menu/subnya dah sesuai. Kira2 yg mana ya gan?
thank
March 19, 2012 at 3:10 PM
Bang ane bingung gimana cara mengisi menu tersebut .kan ane sudah bikin tuh macam macam tapi ane belum bisa liat di dalam isinya bang gimana tuh
March 22, 2012 at 12:38 AM
udah aq coba hasil nya bagus,,(and Aq suka),, boleh riques gak ??
gmn cara nya biar karakter tulisan sub menu bisa sama dgn karakter pada menu utama..??
thanks.
March 23, 2012 at 9:00 PM
@Dhewi Kalau mau sama silakan ganti kode yang ada di baris 15 dengan kode berikut:
#secnav li ul li a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; width:180px; line-height:30px; padding:0 10px; color:#eee; }
March 24, 2012 at 1:48 AM
Syukron mas ya...mantap banget postingannya...semoga jadi amal ibadah untuk mas...
March 28, 2012 at 10:08 PM
Mas Mantep kali,
cara buat sub-sub menunya gimana y ko yang pertama bisa dan selanjuntnya tidak bisa padahal saya copas dari sub menu yang pertama
mohon penjelasannya apkah ada yg di tambah
ditunggu inf
April 1, 2012 at 5:20 PM
Mas saya udah copy smua codenya tetapi saat saya pratinjau, tidak keluar pratinjaunya. Tetapi tulisan error 500. Mohon Penjelasannya apa yang salah.
April 1, 2012 at 9:45 PM
@H. Agung . P coba pasang ditempat lain, atau jika ingin lebih mudah pasang di widget
April 7, 2012 at 12:12 PM
salam kenal mas...kunjungan perdana
April 11, 2012 at 8:00 PM
Makasih banget sudah saya coba and ada tampilan menu dan sub menunya. tapi setelah di klik menu atau sub menunya tidak ada yag berubah. tampilannya sama semua. bingung deh saya ......
April 12, 2012 at 12:34 AM
@Menyenangkan Hati maksudnya yang berubah apanya ya ???
April 12, 2012 at 5:30 PM
mas, bagus udah muncul. tapi menu sebelumnya masih ada. gimana cara ngilangin menu yg sebelumnya?
terus gmn cara manjangin menu yg baru, saolnya default headernya lebih panjang.
April 12, 2012 at 5:40 PM
Gan kalo langsung tata letak bisa ngg ??
April 13, 2012 at 1:21 PM
Menu harizontal dah selesai, trimaksih. kalau boleh tanya, artikel sudah saya buat sebelum buat menu harizontal. Bagaimana cara masukin artikel ke dalam menu atau sub menu tersebut. karna atikel saya ada di beranda semua.
April 15, 2012 at 8:26 PM
keren
April 17, 2012 at 7:32 PM
gan cara atur marginnya gimana ??
luber euy menu anenya, pingin atur marginnya gimana tolong pencerahan. .
April 18, 2012 at 11:15 PM
ALHAMDULILLAH akhirnya ketemu juga yang ku cari ! mkasih banyak ya mas ...!
April 21, 2012 at 9:36 PM
min kyk mna cara nya, misal nya menu 1 itu tampilan postingan yang udah di pilih, masukin di pager nya cuma 1 link postingan gak bisa banyak. tolong penjelasan nya? soal nya mau ujian blog min, nambah nilai.
April 22, 2012 at 12:07 PM
tolong bantuannya,,,,,,,,, cara mengecilkan margin nya gimana!!!!!! punya saya margin nya panjang kali,,,,,,,, jdi kelihatan jelek
April 23, 2012 at 9:12 PM
ok dhe.....nie yang saya cari..
April 24, 2012 at 4:25 PM
om boleh minta script artikel terkait kya gitu ga,,
klw blh bls via e-mail ya,, :D
jackmachinegun@gmail.com
April 25, 2012 at 5:37 PM
cara mengisi menu dan sub menunya gimana ya???
May 3, 2012 at 7:29 PM
Thanks sob...
Tutorialnya membantu banget...
sip....
May 5, 2012 at 4:10 PM
mantep nih om caranya
May 7, 2012 at 10:28 PM
gimana caranya naruh menu horisontalnya ditengah2??
May 10, 2012 at 8:09 AM
Makasih mas bro. sangat bermanfaat.
ane dah coba hasilnya mantap..
thx mas bro...
May 11, 2012 at 12:42 AM
nice info,ijin copas gan
May 19, 2012 at 1:12 PM
gan ,mengatur panjang'nya gimana ,
thx,,
May 20, 2012 at 2:08 PM
Mas kalo mau dilebarin jarak antar menunya gimana
May 21, 2012 at 10:30 PM
Kalau ingin tambah menunya gimana Gan??
May 22, 2012 at 10:30 AM
Bang ,,,klo mengubah tata letak menu sama backgroundnya gimana ???
May 26, 2012 at 12:28 AM
kang kalo mw ganti warna nya code html nya yang mana ya ??
Tlong pencerahan nya.
May 28, 2012 at 11:07 AM
kok saya masih bingung nya?
May 31, 2012 at 9:04 AM
Maksih gan... udah bisa tapi saya masih bingung ngisi halaman pada sub menu tersebut.. makasih mohon infonya gan
June 8, 2012 at 4:33 PM
kok sub-menunya cuma bisa sampe 6?saya mau tambahin bagaimana caranya?mohon pencerahnny..
June 9, 2012 at 12:13 AM
link label maksudnya gmana ? cara memasukan posting yang sudah ada labelnya ke dalam sub menu gmana?mohon pencerahan
June 13, 2012 at 10:00 PM
Ada yang bisa bantu? cara upload/nulis artikel untuk sub menu,bukan menu. sudah saya coba tapi munculnya di menu utama (home/beranda).
terima kasih
June 13, 2012 at 10:40 PM
terima kasih om, artikelnya sangat bermanfaat, sudah saya coba dan hasilnya bagus..sipp
June 15, 2012 at 2:43 AM
ijin coba gann... thank inponya
June 19, 2012 at 4:17 PM
Thanks infonya sob, sangat bermanfaat :D
June 21, 2012 at 4:42 PM
Terima kasih gan atas sharingnya, sudah saya coba dan Oke banget :P
June 26, 2012 at 12:30 AM
thanks gan sudah sharing ilmunya, the best dah...
July 1, 2012 at 3:03 AM
udah ane praktekin ...hasihnya mantap..tp buat ngisinya bagimana ya,,,ane bingug,,mhon pencerahan,,,tq
July 1, 2012 at 5:53 AM
Thank's bos infonya. tdnya sempet bingung, coz tak coba beberapa kali nambah menu yg ada subnya error terus. Setelah tak utek2 akhrnya bisa.
July 3, 2012 at 5:16 PM
Dua jempol deh buat blog.ahmadrifai.net, thanks infonya mas
July 8, 2012 at 11:41 AM
Useful information......! thanks mas bro.
July 10, 2012 at 10:03 PM
Ini kenapa sih? kok setiap saya mau nambahin menu atau submenu selalu ada tulisan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar. Pesan error XML: The element type must be terminated by the matching end-tag" Error 500" tolong bangetttt dong
July 23, 2012 at 11:46 PM
Mas tanya nih....
menu yang kita buat kan dah jadi,trus klo mau buat halaman baru..
misal kalo kita klik menu home keluar halaman home isi yang sudah kita tentuin...gitu seterus ny buat menu2 yg lain.!!gimana cara nya????
mohon bantuannya mas y...
Mksh...
July 26, 2012 at 10:01 AM
kalo biar menu dan sub menunya gimna ya pak?? thx
July 31, 2012 at 1:21 PM
wah keren menu dropnya soib...harus dicoba nih,,,pengunjung pasti sangat tertarik hehe
August 3, 2012 at 4:29 AM
mantap terima kasih
August 3, 2012 at 7:17 PM
Trima kasih sekali, kami dah copas script diatas, sekali lagi trima kasih dan matur nuwun atas ilmunya
August 4, 2012 at 5:30 AM
met pagi gan sory gngu nih,,,klo bikin menu kayak punya agn itu gimana ya caranya,,, itu loh menu yang di navbar itu yang ada tulisan Home,Tentang,Jasa Redesign Template Blogger dan yang lainnya itu. bagi dung ilmunya,,thnks. ditunggu ya info nya soalnya saya nanya ama om guugle tidak nemu2 nih. salam persahabatan selalu
August 4, 2012 at 10:50 AM
@magazineticker Oke deh nanti saya tuliskan, tapi mohon sabar ya
August 5, 2012 at 9:35 AM
thanks mas atas ilmunya, sangat bermanfaat sekali bagi orang-orang seperti saya yang lagi belajar blogging
August 5, 2012 at 4:34 PM
makasih gan, udah search kemana" tentang sub menu horizontal eh nemunya disini hehe.. susah nyari sub menu yang dri HTML buat template bawaan dari blognya. penjelasannya juga langsung ngarti :)
August 6, 2012 at 10:10 AM
Mantap triknya gan, kode cssnya gak di atas ]]> dan gak terpisah , jadi enak ngeditnya... selama ini hanya pake yg cara lama!
ini gan saya mau menanyakan kalau cara mengatur scroll sub menunya itu nongol dgn lambat atau berefek pelan gtu perlu ditambahin apa yah???
dan 1 lg... merubah wight submenu agar sama dgn background a.hovernya
mungkin itu dulu, semoga agan mau merespon dan menjawab pertanyaan saya ini, terima kasih :)
August 7, 2012 at 4:04 AM
@Ardian Tokotua Sub menu ini tidak bisa dibuat nongol dengan lambat atau berefek pelan, kalau mau yang seperti itu maka harus pakai jQuery (menu yang menggunakan jQuery).
Agar background a.hovernya sama dengan warna menu nya cukup hapus kode #cat-nav li:hover { background:#000; } saja, rubah kode #000 dengan #156994 (jika menggunakan warna yang sama demo menu di atas.
August 7, 2012 at 7:01 AM
@Ahmad Rifai
Oh gitu yah...
bukan warna backgrounnya mas, tapi ukuran weight/lebarnya saya rubah dari standar, malah jika di sorot cursor a.hovernya malah masih lebar melewati garis kotaknya...
kemudian, di bagian tata letak kok malah terbentuk titik2 doank memanjang kebawah,,, maaf udah banyak tanya
terima kasih atas tanggapannya :)
August 7, 2012 at 10:55 AM
@Ardian Tokotua untuk merubah lebar sub menu nya silakan cari kode:
width: 200px;
dan
width: 180px;
silakan rubah angka 200 dan 180 dengan ukuran lebar yang kamu mau. misalnya 240 dengan 220, dsb.
Di bagian tata letak hanya terbentuk titik memanjang kebawah karena kode css nya tidak diletakkan sebelum kode ]]></b:skin>
Jika pada tata letaknya tidak ingin terlihat seperti itu silakan pasang css nya sebelum kode ]]></b:skin>
August 7, 2012 at 10:21 PM
thanks gan,,sukses nih di blog ane:)
August 9, 2012 at 11:27 PM
terima kasih ilmu ya.dari kmarin aku cari-cari baru ketemu yang pas dan mudah di praktekan.mantap mas
August 11, 2012 at 6:50 PM
@Ahmad Rifai Berhasil gan... Udah dirubah weightnya, terima kasih atas arahannya gan... hanya untuk penpatan diatas ]]>
Itu gak bisa gan malah nongol pesan error di template :)
August 11, 2012 at 9:26 PM
@Tokotua-shop Kalau mau pasang css di atas kode ]]></b:skin> tidak perlu pakai kode <style> dan </style> yang ada di line 1 dan 21
Cukup pasang kode yang ada di line 2 sampai 20
August 12, 2012 at 2:28 AM
cara mengisi menu dengan artikel kita gimana mas thanks
August 12, 2012 at 2:54 PM
Agan, gimana caranya merubah ukuran, kepanjangan gan ukurannya, memendekan/ mengecilkannya gimana gan??
August 13, 2012 at 6:35 PM
@alfian saputra cara mengisi menunya sudah saya tuliskan di atas.
@Bali Jam Tangan pada tutorial di atas juga sudah saya tuliskan cara mengatur lebarnya kodenya
{background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}
mengatur tingginya juga ada pada kode tersebut, ganti angka 35 pada kode height:35px; sesuai selera
August 16, 2012 at 6:47 PM
kalo mau nggeser menunya agak ketengah gmna? seperti pnya agan?
mohon bantuanya ya
August 17, 2012 at 11:54 AM
kala mao merubah warnanya gimana gan, hadoh ane baru belajar ni.. udah panas ni otak
August 30, 2012 at 12:09 AM
ini tutorial paling jelas..
ane langsung paham gan..
makasih