Cara Membuat Menu Navigasi diatas Header Blog

Menu Navigasi Horisontal diatas Header blog

Setelah Artikel terdahulu "Cara membuat menu dropdown bergambar", maka kali ini saya akan lanjutkan dengan membuat menu serupa tetapi menu navigasinya horisontal diatas header blog atau diatas judul blog.
Seperti biasa yang harus dilakukan adalah :

contoh menu navigasi diatas header

1. Login kedalam Blog
2. Klik Template
3. Edit HTML
4. Centang Expand widget template pada pojok kanan untuk template terdahulu atau older template, sedangkan bagi kalian yang templatnya baru atau daftar di Blogger tahun 2014 ini kalian tidak perlu susah payah mencentang expand widget, karena memang sudah tidak ada lagi disana.
5. Copy paste Kode HTML dibawah ini : lalu cari kode ]]></b:skin> kemudian letakkan diatasnya.

  /*Gm Top Menu*/
#top{margin:right;padding: 0;width: 960px;background:#000000;border-bottom:1px solid #fff;}
#top-wrap{margin:right;padding: 0;width: 960px;background:#000000;}
#navwrap {margin: 0px auto; width:960px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:#8A0808; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#000000; color:#ffffff;}}
#navbar-iframe {display: none !important;}

6. Jangan lupa save template lalu view blog, jika penempatannya sudah benar maka lanjutkan copy paste kode dibawah, lalu letakkan dibawah kode </head>.

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='Url Blog link artikel yang dituju' title='Beranda'>Beranda</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Profil'>Profil</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Artikel'>Artikel</a></li>
<li><a href='http://www.menunavigasi.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='Url Blog link artikel yang dituju' title='About'>About</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Facebook'>Facebook</a></li>
<li><a href='Url Blog link artikel yang dituju' title='Site Map'>Site map</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

7. Selesai

Penjelasan :
width: 960px;background:#000000;border-bottom:1px solid #fff; artinya adalah ukuran lebar atau panjang menu navigasi tersebut 960px, apabila masih ada ruang masih bisa ditambah lagi untuk memberi tambahan menu pada blog kalian, Kode background #000000 artinya background berwarna hitam dan kode #fff artinya berwarna putih.
Float: left; adalah untuk menempatkan menu navigasi berada dipojok atas sebelah kiri
background:#000000; color:#ffffff; artinya kita menginginkan background dengan warna hitam dan tulisan berwarna putih.
Url Blog link artikel yang dituju artinya kalian harus mencantumkan url blog kalian sendiri ditempat tersebut. ( contoh url,= http://www. menunavigasi.blogspot.com/2014/01/cara-membuat-menu-navigasi-diatas-header-blog.html ).

Sampai disini dulu, mudah-mudahan kalian mengerti apa yang saya sampaikan dan semoga artikel : cara membuat menu navigasi diatas header blog ini bermanfaat.
Pelajari selanjutnya Cara membuat menu navigasi pada footer blog

Keep Blogging!