Cara Membuat Menu & Sub Menu Bar di Blog

Halo sahabat Shucker kali ini saya mau entri artikel pertama saya & tentunya insya Allah artikel pertama saya ini berguna bagi para sahabat Shucker semua. Sekarang ini saya sedang belajar membuat blog dan saya menemukan sebuah masalah yaitu bagaimana ya, cara membuat menu dan sub menu bar??? kita langsung saja bagaimana caranya???Cekidot !

     1.      Setelah membuat blog maka kamu akan masuk halaman pertama blog.

     2.      Pilih menu buka daftar entri terus pilih template.

         3. Terus pilih Edit HTML.

         4. Tekan Ctrl+F pada keyboard, terus masukan coding dibawah ini pada field Search :

          div class='main-outer'>

        terus tekan enter.

5. Setelah ketemu CoPas script dibawah ini tepat diatas script yang dicari di cara no.5 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>

PENJELASAN :

Ø  Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

Ø  Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.

Ø  Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

         6. Setelah itu klik Pratinjau Template untuk memastikan script dengan benar, setelah itu pilih               Simpan Template dan tutup halaman template tersebut.

         7. Pilih Lihat Blog & wew blog dapat dipublikasikan.

Apabila cara tersebut diatas bermasalah atau tidak berhasil,silahkan komentar!!! tapi pengalaman pribadi saya dengan cara tersebut 100% berhasil.

Terima Kasih & Selamat Mencoba !!!!

Cara ini saya dapatkan dari sahabat bloger saya disini….