CARA MEMBUAT MENU HARIZONTAL DIATAS HEADER

Keren kan sobat!!!
Pada kesempatan ini saya ingin sedikit memberikan tips atau cara tentang membuat menu horizontal di atas header , tips ini saya dapat dari
blognya vancodeto.wordpress.com yang kebetulan ketika baru membangun blog ini saya ingin memasang menu di atas header. Tidak seperti bisanya ketika ingin membuat menu horizontal selalu menggunakan gadget yang ada di bawah header. Tapi untuk cara yang satu ini tidak menggunakan gadget. Di atas adalah contoh gambar ketika saya membuat menu di atas header.

Dan berikut cara membuat menu horizontal diatas header :

1. Login Blogger
2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
3. Cari kode ]]></b:skin>
4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

berikut adalah kodenya: "langsung copass aja sobat"

/*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. Letakkan kode di bawah ini di bawah kode </head>

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

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

Selamat Mencoba dan Semoga Berhasil!!!

SHARE

Author

“Tak perlu menjadi orang lain ketika ingin di puja atau dipuji, karena yang terpenting adalah ketika dirimu mampu menerima segala kekuranganmu dengan lapang dada.”