Cara Membuat Menu Bar Atau Menu Navigasi Di Atas Header
Pada sore hari ini saya akan membahas cara membuat menu navigasi di atas header seperti yang ada diatas .
kalian pasti membuat navigasi di atas header pasti untuk Disclaimer , About , Dll kan
langsung saja saya akan membahasnya
- Login Blogger.com
- Masuk Dashboard, klik template ,dan klik Edit HTML
- Cari ]]></b:skin>
- jika sudah ketemu ]]></b:skin>
- Masukkan script dibawah ini :
#top{margin:auto;padding: 0;width: 990px;background:#ffffff;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:#000000;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;}
Perhatian :
#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:#000000;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;}
Perhatian :
- Ganti kode yang berwarna biru dengan ukuran sesuai lebar blog kalian
- untuk yang warna hijau itu ganti dengan warna yang anda sukai
- untuk yang warna merah itu untuk warna tulisan , kalau saya warna hitam kalian terserah kalian.
- Setelah script diatas sudah di taruh sekarang cari</head>
- Setelah ketemu </head>
- Masukkan script dibawah ini :
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.abstrakpengetahuan.com/l' title='about'>Tentang Kami</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Term Of Service'>Terms Of Service</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='sitemap'> Sitemap </a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Kontak'> Kontak </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.abstrakpengetahuan.com/l' title='about'>Tentang Kami</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Term Of Service'>Terms Of Service</a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='sitemap'> Sitemap </a></li>
<li><a href='http://www.abstrakpengetahuan.com/' title='Kontak'> Kontak </a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
- Silahkan ganti linknya sesuai yang anda punya.
- Blog itu mudah dengan niat.
Terima Atas Perhatian
Comments
Post a Comment
1.Jangan Lupa Commentnya :)