Menu horizontal di blog menggunakan html dan css simple dan fast loading
Menu merupakan bagian terpenting di dalam sebuah web karena dengan menu pengunjung akan mudah untuk melihat karakter web itu sendiri
Biasanya di dalam menu blogger di gunakan untuk menyimpan link aktif untuk contact ,disclaimer,ataupun yang lain
Ini dia cara membuat menu horizontal
1. Simpan html di bagian body di bawah kode <body>
<div class='menu'>
<ul>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
</ul>
</div>
Kemudian tambahkan css untuk gaya html tersebut di bawah kode skin template atau di bagian bawah kode <b:skin> css di bawah
/* ////MENU//////// */
.menu {width:1000px;
background:#444;
font-family: 'Lato', sans-serif;
font-size:16px;
color:#fff;
overflow:hidden;
height:50px;
}
.menu ul {width:100%;
display:block;
}
.menu ul li {float:left;display:inline:block;
padding-top:18px;}
.menu ul li a {color:#ffffff;
padding:0 15px 0 0;
}
Kurang lebih penampakan seperti ini
Menu merupakan bagian terpenting di dalam sebuah web karena dengan menu pengunjung akan mudah untuk melihat karakter web itu sendiri
Biasanya di dalam menu blogger di gunakan untuk menyimpan link aktif untuk contact ,disclaimer,ataupun yang lain
Ini dia cara membuat menu horizontal
1. Simpan html di bagian body di bawah kode <body>
<div class='menu'>
<ul>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
<li><a href='#'>MENU </a></li>
</ul>
</div>
Kemudian tambahkan css untuk gaya html tersebut di bawah kode skin template atau di bagian bawah kode <b:skin> css di bawah
/* ////MENU//////// */
.menu {width:1000px;
background:#444;
font-family: 'Lato', sans-serif;
font-size:16px;
color:#fff;
overflow:hidden;
height:50px;
}
.menu ul {width:100%;
display:block;
}
.menu ul li {float:left;display:inline:block;
padding-top:18px;}
.menu ul li a {color:#ffffff;
padding:0 15px 0 0;
}
Kurang lebih penampakan seperti ini
Terima kasih telah membaca artikel tentang Cara membuat menu horizontal di blog di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
