Membuat Top Menu di Atas Header

Penulis : Moh. Arif Masulili / Rabu, Februari 01, 2012
Salam blogger mania sobat..udah lama nieh saya  gak menyapa semua..kemaren sibuk di dunia nyata jadinya gak sempet posting dech..hehe tapi untuk menjaga trafic blogger harus terus posting kan..hehe baiklah kali ini saya ingin share ke jurig jarian mania semua 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 biru silahkan sobat ganti sesuai keinginan sobat bloger.

Selamat mencoba, semoga bermanfaat...

Label:

0 komentar

Posting Komentar

 
Kajian Islami © Powered by Blogger Template by Blogger Templates Gallery
Thanks to Life2Work and Blog Zone