Latest News :

Home » » Cara Membuat Top Menu di atas Header

Cara Membuat Top Menu di atas Header

Selasa, 28 Agustus 2012 | 0 komentar

Tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa di blog ini tepatnya di atas header. Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech capcus.

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;
}


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>



Yang perlu diperhatikan kata berwarna hijau dan biru silahkan sobat ganti sesuai keinginan sobat bloger


Semoga bermanfaat
Share this article :
 
Support : Creating Website
Copyright © 2011. Nicko Part III - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger