Navbar ganti menjadi menu
Namun karena tampilannya yang terlalu sederhana kebanyakan para blogger menyembunyikan kotak navbar tersebut dengan berbagai macam alasan.Nah untuk itu daripada navbar di suatu blog alangkah lebih baiknya diganti menjadi sebuah menu untuk meletakkan baik itu privacy police daftar isi,disclaimer maupun tentang saya/aboutme untuk mempercantik tampilannya.untuk screen shotnya sobat bisa lihat seperti gambar di bawah ini.
 | |
| navbar menu |
apabila sobat blogger tertarik dan ingin membuatnya dan memasang di blog sobat adapun caranya sebagai berikit:
1.Login Ke blog
2.pilih opsi lainnya
3.klik templete
4.Edit Templete
5.Cari kode Html ]]</b:skin>
6.jika sudah ketemu copy dan paste letakkan kode css di bawah ini tepat diatas kode ]]</b:skin>
/*-------
Bilah Menu Navigasi Di Atas Header Halaman Blog
Blog:Tutorial blogspot Bisnis online
URL : http://Tableex.blogspot.com/
-------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
7.selanjutnya cari kode html seperti dibawah ini
<body>
8.jika sudah ketemu kode diatas silakan copy dan paste kode html di bawah ini tepat di bawah kode <body>
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://tableex.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QxxAnUyurHByRYMxz_ddviKzHu2atzDolh9V04-1oTmFg-3XOLf_LwCRJ6l4sKH-SJo1XZnW5nBwuwGO9hTd2zUcGSMcIPbQCveH_Hb4u8QwNI1FI8KnNQtj_Gh5aKs2S948FNlDVOg/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a></li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>
9.klik pratinjau.
10.silakan lihat jika tampil halaman menunya berarti anda berhasil.
11.save.
12.selesai
semoga sukses dan semoga artikel mengganti navbar menjadi menu bermanfaat jika ada kendala silakan tinggalkan komentar sobat.
Happy blogging.