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 :
  1.  Ganti kode yang berwarna biru dengan ukuran sesuai lebar blog kalian
  2.  untuk yang warna hijau itu ganti dengan warna yang anda sukai
  3.  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>
  • Silahkan ganti linknya sesuai yang anda punya.
  • Blog itu mudah dengan niat.
Sekian Cara Membuat Menu Bar Di atas header
Terima Atas Perhatian

Comments

Popular Posts