Yoshep Web Info - Kemarin saya membagikan tentang Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu Diblog dan sekarang yang kali ini akan saya bagikan Cara Menambahkan Menubar diatas Header Blog lagi tapi tanpa menu Dropdown.Berikut Cara Menambahkan Menubar diatas Header Blog :
Langkahnya membuat top navigasi menu:
- Template > Edit HTML
- Cari/Temukan (CTRL+F) kode ]]></b:skin>
- Simpan kode berikut ini diatas kode ]]></b:skin>
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#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: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;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;}
#navbar-iframe {display: none !important;}
Catatan :
- Sesuaikan lebarnya (width:950px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded;
- Ganti warna huruf menu > color:#222;
- Cari/Temukan (CTRL+F) kode <body>
- Simpan kode berikut ini dibawah <body>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Top Menu'>Top Menu</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Facebook'>Facebook</a></li>
<li><a href='#' title='Twitter'>Twitter</a></li>
<li><a href='#' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Catatan : Ganti Kode # yang ada diatas dengan link anda
- Terakhir Simpan Template
Keyword : Cara Tambahkan Menubar diatas Header Blog, Tambahkan Menubar diatas Header Blog, Tambahkan Menubar diatas Header Blog,
Cara Membuat Menubar diatas Header Blog, Cara Membuat Menubar diatas Header Blog, Cara Membuat Menubar diatas Header Blog, Cara Buat Menubar diatas Header Blog, Cara Buat Menubar diatas Header Blog,
No comments:
Post a Comment