Home » » Cara Membuat Menubar Di Atas Header Blog

Cara Membuat Menubar Di Atas Header Blog





Banyak yang bertanya - tanya tentang cara menambahkan atau membuat menubar di atas header blog kepada saya. Memang jika kita lihat, menambahkan menubar tepat di atas header blog itu bisa mengoptimalkan template blog dan juga membuat tampilan menu navigasi menjadi nyaman dan sangat user friendly.

Banyak kasus yang saya temukan, bahwa masih ada blog - blog yang bertebaran di internet menggabungkan antara menubar seperti kontak,sitemap dengan menu - menu kategori artikel dan itu tentu akan mengganggu kenyamanan pengunjung karena tampilan blog akan terlihat agak sedikit kacau dan membingungkan.

Namun hal itu tidak akan terjadi bila kalian memisahkan antara menubar informasi situs dengan menu - menu artikel dengan membuat atau menambahkan menubar tepat di atas header blog seperti yang ada pada blog ini sehingga tampilanya jadi terlihat bersih dan user friendly.

Lalu bagaimana cara menambahkan dan membuat menubar tepat di atas header blog ? caranya sebenarnya cukuplah mudah, kalian cukup ikuti tutorial dibawah ini dengan benar :

1). Masuk ke dashboard blog kalian

2). Dan langsung menuju ke bagian pengeditan "Template"

3). Kemudian kalian cari code ]]></b:skin>

4). Setelah itu kalian pastekan code script dibawah ini tepat di atas code ]]></b:skin> 


#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;}

Keterangan :

  • Ganti tulisan berwarna "biru" untuk mengatur ukuran / lebar sesuai lebar blog kalian
  • Ganti tulisan berwarna "Hijau" untuk mengganti warna menubar sesuai keinginan kalian
  • Ganti tulisan berwarna "Merah" untuk mengganti warna text pada menubar

5). Dan setelah itu kalian cari code <body> , Kemudian pastekan code dibawah ini tepat di bawah code <body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.informasiajib.info/p/about-me.html' title='about'>About</a></li>
<li><a href='http://www.informasiajib.info/p/blog-page_9.html' title='Kontak'>Kontak</a></li>
<li><a href='http://www.informasiajib.info/p/sitemap.html' title='Sitemap'>Sitemap</a></li>
<li><a href='http://www.informasiajib.info/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Keterangan :
  • Tulisan berwarna biru kalian ganti dan sesuaikan dengan blog kalian.

6). Terakhir simpan template dan lihat hasilnya.


Terimakasih sudah membaca Cara Membuat Menubar Di Atas Header Blog

« Previous
« Prev Post
Next »
Next Post »