menambah menu dan submenu bar pada blog

Bagaimana Menambahkan menu dan submenu pada blog !!

Halo kawan, ayo saya akan berbagi sedikit tentang cara membuat sub menubar dan menu bar di blog kalian. Memberi sub menu bar dan menu bar akan membuat blog kalian tampak lebih menarik dan lebih tertata...... ayo ikuti langkah-langkah berikut ini :

1. Klik Menu Desain
2. Klik Menu Template lalu pilih menu Edit HTML
3. Klik menu Lanjutkan
4. Klik menu Expand Temple Widget 
5. Cari scrift berikut : <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>  atau lebih cepat klik saja F3 atau ctrl+F.
6. Setelah ketemu, copy paste scrift berikut tepat diatas scrift yang dicari tadi :

<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 Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</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>

</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>

</li>

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

</ul>

</div>

PENTING !!!:

• Ganti tanda  # (warna biru) dengan link/url yang anda inginkan. bisa jadi link posting atau label (katagori) yang ada pada blog kalian.
• GantiTulisan warna biru dengan menu dan sub menu yang diinginkan.
• Setiap sub menu bisa ditambah ataupun dikurangi sesuai keinginan. 

Kemudian klik Pratinjau dulu unutk memastikan scrift sudah benar. lalu simpan dan tutup edit HTML tersebut.

 

Note : sebaiknya back up dulu template saudara sebelum merubah/menambah scrift tersebut. agar bisa digunakan kembali jika ada masalah penambahan scrift diatas.

 

Sedikit tentang cara menambah sub menu dan menu bar, semoga bermanfaat......