.png "Wellcome"){kind=small}
.png "Wellcome"){kind=small}
- 1. Login di blogger dengan ID blog sobat
- 2. Klik menu Layout
- 3. Klik Tab Edit HTML
Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
- 4. Centang Expand Template Widget agar code dapat terlihat semua
- 5. Masukan code berikut
Tepat dibawah code <b:skin><![CDATA[
/*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;
}
#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;
}
6. Lalu sobat cari code <body> gunakan ctrl + F untuk memudahkan pencarian.
7. Lalu sobat copas code berikut tepat dibawah code <body>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.ganti dengan link sobat/'>Home</a></li>
<blink><li><a href='http://www.ganti dengan link sobat' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.ganti dengan link sobat' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Request Lagu'>Request Lagu</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.ganti dengan link sobat/'>Home</a></li>
<blink><li><a href='http://www.ganti dengan link sobat' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.ganti dengan link sobat' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Request Lagu'>Request Lagu</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Yang perlu diperhatikan kata berwarna hijau silahkan sobat ganti sesuai keinginan sobat bloger
Semoga bermanfaat
0 Komentar untuk "memasang menu di atas header blog"