Cara membuat menu horizontal di atas header

Sudah tidak asing kan dengan judul postingan yang ini.. yang pastinya kalian para blogger dah pada jago dalam pembuatan menu horizontal di atas header ini, tapi saya cuma ingin mengulas kembali, takutnya masih ada yang masih kurang paham atau lupa pada pembuatan widget ini. Kita mulai aja pembahasannya.

Langkah-langkah cara membuat menu horizontal di bawah header ;
1. Login Blogger

2. Pilih  "Template" ==> Pilih "Edit HTML" ==> Lanjutkan ==> Cek "Expand Template Widget"
3. Cari kode ]]></b:skin> ( Biar lebih cepat gunakan Ctrl + F atau tekan F 3)

4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#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: 100%;
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;
}

5. Lalu Cari kode </head> 

6. Copas kode berikut tepat di bawah kode </head>

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

7. Ganti Tulisah Biru dengan Alamat link di blog kalian
8. Ganti Tulisan Merah dengan Nama Link di blog kalian
9. Klik "Simpan Template"

10. Selesai. Good Luck !!!

Baca Juga Yang Lainnya