Cara Membuat Menu, Diatas Header Termudah

Konsei Campur - Cara Membuat Menu, Diatas Header Termudah - Kali ini saya akan berbagi apa yang telah saya terapkan di blog saya, jadi intinya cara ini pernah saya lakukan. Membuat Menu di atas header bukanlah hal yang sulit bagi blogger pemula. Buktinya saya yang baru terjun di dunia blogger dan tidak mengerti HTML sama sekali bisa membuat menu diatas header. Ini gambaran/bentuk menu diatas header. Yang saya kasih kotak merah.

dalam tutorial ini saya akan jelaskan bagaimana cara memasang atau membuat menu diatas header dan bagaimana cara mengganti lebar dan warna background menu diatas header.

Baca juga : cara membuat popular post seperti evo

Menentukan lebar dan warna background menu ini bertujuan untuk menyerasikan antara warna menu dengan warna template kalian. Tenang saja semuanya tidak sulit seperti apa yang kalian banyangkan.
langsung saja, Cara membuat menu diatas header termudah :

1. Lagin ke blog kalian.
2. klik template dan klik edid html.
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian)

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 75%;
background:#FE80DF;
border-bottom:1px solid #FE80DF;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; 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: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 75%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

4. cari lagi kode </head> dan letakkan kode brikut dibawahnya:

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

5. Setelah itu klik simpan dan lihat hasilnya.

untuk merubah warna background menu silakan ganti warna hijau dan lebarnya silakan ganti Warna Merah
dan silakan ganti warna kuning untuk link yang akan di kehendaki.