Cara Membuat Top Menu di atas Header


Download Beta


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 hijau silahkan sobat ganti sesuai keinginan sobat bloger

Semoga bermanfaat 





Share this post :

Poskan Komentar

Peraturan :
Karena beberapa kali terjadi penulisan komentar yang tidak sesuai dengan peraturan, maka banyak komentar yang admin hapus. Dan admin mengubah settingan komentar.

1. Silakan tulis komentar dengan bahasa yang sopan dan berkaitan dengan artikel.
2. NO SARA, NO PORNO, NO KEKERASAN.
3. Dilarang menulis komentar yg sama pada setiap posting.
4. Akun anonim sudah dinonaktifkan.
5. Jika menggunakan Name dan URL, harus URL yang valid. (tidak berlaku/dinonaktifkan)

> Jika ditemukan komentar yang melanggar ketentuan ini akan dihapus.
> Berlaku untuk komentar mulai 21 April 2013 dan seterusnya.

Sponsor

Anda merasa dibantu??? Silakan berikan DONASI anda seikhlasnya.

Translate

English French German Spain Italian Dutch

Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. My-Axes - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
Selamat datang di My-Axes Edukasi. Sebuah situs blog sederhana yang akan memberikan anda pengetahuan-pengetahuan dan artikel terupdate. Ingin lebih dekat dengan admin? Hubungi admin dengan mengirimkan pesan singkat (sms) ke 085641282142. Terimakasih.