CARA MEMBUAT MENU DAN SUB-MENU PADA BLOG

Salam dan bahagia sobat.. Kesempatan kali ini saya akan membagikan tips bagaimana cara membuat menu dan sub-menu pada Blog. Untuk membuat menu dan sub-menu kali ini saya menggunakan menu "Edit HTML". How to get there.. caranya dengan masuk dulu ke halaman Blogger, kemudian di bagian side-menu klik menu Tema/Theme, selanjutnya klik tombol "Edit HTML" sampai di tahap ini kita sudah masuk ke halaman Edit HTML. Sampai di sini siapkan obat sakit kepala kalau anda merasa mual dan pusing setelah melihat halaman editor.. curcol penulis yg ga punya besik coding HTML..heheh... kemudian dengan menggunakan scroll atas dan bawah carilah kode berikut..

<div class='main-outer'>

kemudian copas script berikut tepat diatasnya..

<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, &quot;Times New Roman&quot;, 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='#'>MENU 1</a></li>
    <li><a href='#'>MENU 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>SUB MENU 2.1</a></li>
<li><a href='#'>SUB MENU 2.2</a></li>
        <li><a href='#'>SUB MENU 2.3</a></li>
</ul>
    </li>
    <li><a href='#'>MENU 3</a>
<ul id='sub-custom-nav'>
        <li><a href='#'>SUB MENU 3.1</a></li>
</ul>
</li>
    <li><a href='#'>MENU 4</a></li>
  <li><a href='#'>MENU 5</a>
<ul id='sub-custom-nav'>
        <li><a href='#'>SUB MENU 5.1</a></li>
</ul>
</li>
  </ul>
</div>

Keterangan :

# merupakan URL tujuan ketika tombol menu diklik, ubahlah sesuai URL tujuan anda

MENU merupakan judul menu, ubahlah sesuai dengan nama menu keinginan anda

SUB MENU merupakan penjabaran dari menu, sub menu akan muncul ketika kursor diletakkan diatas tombol menu ubahlah sesuai dengan keinginan anda

Demikian tips CARA MEMBUAT MENU DAN SUB-MENU PADA BLOG dari saya, semoga bermanfaat.. Best regards to gooblogi.com dan blogtutorials-01.blogspot.co.id atas pencerahannya. 

Salam...