Pagi :D
kali ini saya akan membuat tutorial .
Cara membuat menu di atas header di blog
Langsung aja tutorial nya di bawah
DEMO
1. Buka blogger- Template - Edit HTML
2. Masukan kode berikut di atas ]]></b:skin>
/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#696969;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#696969;
}
#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:#FF9900; color:#F0F8FF;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#696969;
}
#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:#696969;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:#696969;}
#navbar-iframe {
display: none !important;
}
3. Taruh kode berikut tepat di bawah head
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='/'>HOME</a></li>
<li><a href='LINK'>DISKRIPSI</a></li>
<li><a href='LINK'>DISKRIPSI</a></li>
<li><a href='LINK'>DISKRIPSI</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
4. Simpan dan selesai
Belum ada tanggapan untuk "Cara membuat menu navigasi di atas header "
Post a Comment
Blogger Bijak
Selalu meninggalkan komentar ^_^