Membuat Menu Serta Sub Menu Tanpa jQuery

Sebenarnya panduan cara membuat menu sudah pernah saya tuliskan di blog ini, artikel tersebut saya beri judul Tutorial Bikin menu horizontal di blogger, namun karena tutorial bikin menu horizontal tersebut tidak saya sertai dengan penambahan sub menu akhirnya banyak teman-teman yang menanyakan bagaimana cara membuat sub menu.

Pada artikel kali ini saya akan menuliskan Tutorial/cara membuat menu serta sub menu di blogger tanpa menggunakan jQuery, yakni menggunakan kode HTML + css kode saja

• Home
• Menu 1
• Menu + Sub Menu
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu

Langsung saja ya...

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.


1. Klik Menu Rancangan / Design



2. Klik Menu Edit Html

3. Beri Centang Pada Bagian Expand Template Widget

Kode Yang Harus Di Cari / Temukan
Cari kode :

<div class="main-outer">
atau
<div id="main-wrapper">
atau
<div id="main"> (cara cepat tekan ctrl + F)

Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya

<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="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Home</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Menu 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Menu + Sub Menu</a>
<ul id="sub-custom-nav">
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub Menu 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub Menu 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Menu</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Menu + Sub</a>
<ul id="sub-custom-nav">
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 3</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 4</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 5</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Sub 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#">Menu</a></li>
</ul>
</div>

Catatan :

Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Tutorial bikin menu horizontal di blogger

Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.

Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktek kan


Ok langsung saja.

Panduan membuat menu horizontal blogger

1. Login ke dashboard blogger
2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
3. Klik Add Gadget / Tambah Gadget.
4. Pilih/klik opsi HTML/Javascript
5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
6. Klik Save / Simpan

Selesai :D

Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}
</style>
<div id="cat-menu">
<ul class="sf-menu nav" id="cat-nav">
<li><a href="http://www.blogger.com/">Home</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#"> Menu 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#"> Menu 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#"> Menu 3</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#"> Menu 4</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=549408998758655082#"> Menu 5</a></li>
</ul>
</div>

Keterangan.

ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.