- Pertama yang mesti dilakukan adalah masuk dulu ke akun blogger
- Pilih Templat lalu pilih Edit HTML, klik Lanjut
- Jangan Lupa centanng Expand Widget Template
- Selanjutnya adalah mencari kode ]]</b:skin>
- lalu letakkan kode di bawah ini tepat di atas kode ]]</b:skin>
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
- Setelah itu letakkan kode di bawah ini tepat pada di atas kode ]]</b:skin>
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);
}
Ket: kode yang berwarna hijau kalian bisa ganti dengan warna kesukaan kalian.
- Selanjutnya cari kode <body>, dan letakkan kode di bawah ini tepat di atas kode tadi
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='URL'>Home</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>
Ket: teks yang berwarna biru ganti dengan URL yang kalian inginkan
Setelah langkah - langkah selesai klik Pertinjauan agar kita bisa mengetahui kita berhasil atau tidak, setelah itu klik simpan
Demikian mengenai Cara membuat menu Horizontal Mirip navbar, semoga artikel yang saya berikan dapat bermanfaat buat kalian. wasalamualaikum
info bagus nih, pertamax
BalasHapussaya bookmark dulu yah kang
aterim kasih teah berkunjung....
BalasHapusTerima kasih sharingnya, kalau bikin menu seperti ini di kolom sebelah kiri gmn caranya ya mas, aku pingin bikin menu kategori yg bisa ada submenunya?
BalasHapusKepingin mempelajari dan mencobanya.
BalasHapus