mebuat menu navigasi di blog

Selamat Jumpa Kembali, kali ini saya ingin menuliskan bagaimana langkah membuat menu navigasi di blog, mudah-mudahan ini bisa mengingatkan saya ketika saya ingin mendesign blog lain saya.

1. Masuk ke dashboard blog.
2. Kemudian pilih template
3. Kemudian pilih edit Html

4. kemudian tekan ctrl+F dan masukan kode berikut </header> pada pencarian karena saya ingin meletakan menunya tepat di bawah header.
5. Kemudian letakan kode html berikut ini tepat di bawah kode di atas

<div id='NavbarMenu'>
          <div id='NavbarMenuleft'>
          <ul id='nav'>
              <li><a href='#'>HOME</a></li>
              <li><a href='#'>SENI</a>
                      <ul>
                        <li><a href='#'>SUB MENU 1</a> </li>
                        <li><a href='#''>SUB MENU 2</a> </li>
                        <li><a href='#'>SUB MENU 3</a></li>
                    </ul>
            </li>
             <li><a href='#'>MAKALAH</a></li>
             <li><a href='#'>KLIPING</a>
                <ul>
                       <li><a href='#'>ALAM</a></li>
                       <li><a href='#'>SOSIAL</a></li>
                       <li><a href='#'>EKONOMI</a></li>
                      <li><a href='#'>SEJARAH</a></li>
                </ul>
            </li>
            <li><a href='#'>CONTACT</a></li>
            </ul>
          </div>
        </div>

rubah tulisan yang berwarna hijau sesuaikan dengan alamat url blog kita.
6. setelah itu kita letakan kode css tepat di atas kode berikut: ]]></b:skin> caranya sama seperti tadi kita tekan ctr+f kemudian letakan kode tersebut dalam kotak pencarian. berikut kode cssnya:

/*----------Menu ----------------*/
#NavbarMenu { background: silver; width: 100%; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; }
#NavbarMenuleft { width: 100%; float: left; margin: 0; padding: 0; }
#nav { margin: 0; padding: 0; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0; }
#nav li { list-style: none; margin: 0; padding: 0; }
#nav li a, #nav li a:link, #nav li a:visited { background: transparant; height: 24px; color: #000; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:7px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }
#nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:7px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
#nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
#nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; }
#nav li { float: left; padding: 0; }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover { position: static; }

kemudian simpan. DEMO
Demikian langkah membuat menu navigasi di blog mudah-mudahan bermanfaat.