CARA MEMBUAT MENU DAN SUBMENU PADA BLOG

Langkah Pemasangan

- Klik  Desain 

- Pilih  Template.
- Lalu pilih  Edit HTML 

Cari Script berikut. Gunakan Ctrl + F, dan masukan salah satu kode dibawah ini :

<div class='main-outer'>  atau <div id='main-wrapper'> atau <div id='main'>

Setiap template punya kode masing-masing. Setelah dapat kode diatas, copy dan paste Script berikut tepat diatasnya Script yang tadi kalian cari : 

<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='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2A</a></li>

<li><a href='#'>Sub Menu2B</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3A</a></li>

<li><a href='#'>Sub Menu3B </a></li>

</ul>

</div>

Keterangan :
1. Cara memasukkan alamat URL:

Ganti tanda # dengan alamat URL kalian. URL bisa kalian arahkan ke alamat label blog.

2. Cara menuliskan judul menu atau judul postingan: 

Ganti Tulisan Menu dan Submenu dengan nama menu dan sub menu yang anda inginkan kalian.

Contoh jika kalian ingin menambah menu ke 4. Cara menambah menu dapat ditambah script diatas kode </div>. Scriptnya sebagai berikut :

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4A</a></li>

<li><a href='#'>Sub Menu4B </a></li>

</ul>

Jika kalian ingin menambah menu tanpa submenunya, tinggal tambah kode diantara kode </ul> dan </div>. Kode scriptnya sebagai berikut :

</li>

<li><a href='#'>Menu5</a></li>

</ul>

**Penting :
* back up dulu template sebelum menambahkan kode diatas ke dalam notepad atau word

Setelah selesai kalian dapat meninjau blog kaliaan sebelum di publikasikan. Silahkan mempraktekan. Jika masih tidak paham bisa komen di bawah ya. :D