Cara membuat menu horizontal dibawah header blog

Dalam membuat Menu Horizontal diblog ada yang ditempatkan dibawah atau diatas header blog, dalam pembuatannya ada yang jenis dropdown dan tanpa dropdown tergantung kebutuhan. Cara Membuat Menu Dropdown Horizontal dibawah header blog dapat dilakukan dengan langkah-langkah sebagai berikut:

1. Sign in diblog
2. Klik Edit HTML
3. Centang Expand Template Widget
4. Cari kode ]]> </ b: skin> (gunakan ctrl + F untuk memudahkan pencarian)
5. Copy dan pastekan Kode CSS dibawah ini dan tempatkan diatas kode ]]> </ b: skin>   
6. Klik Pratinjau untuk melihat kesalahan
7. Klik Simpan


.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:red;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
 .menu li{
float:left;
padding:0px;
}
.menu li a{
background:red;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: red;
text-decoration:none;
}
.menu li ul{
background:red;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:1;
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:red;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:red;
border:0px;
color:red;
text-decoration:none;
}


Keterangan


Kode warna red = Ganti warna sesuai dengan selera


Memasang kode html drop down menu di tata letak blog dibawah Header


1. Klik Tata letak dibawah header
2. Klik HTML/Java Script
3. Copy dan pastekan Kode CSS dibawah ini di kolom konten HTML/Java Script
4. Klik Simpan dan lihat hasilnya


<div style="text/css">
<ul class="menu">
<li><a href="URL  alamat blog">HOME</a></li>
<li><a href="URL  alamat blog">PROPIL</a></li>
<li><a href="URL  alamat blog">FACEBOOK</a></li>
<li><a href=""> JUDUL  1</a>
<ul>
<li><a href=" URL  alamat blog "> JUDUL  1</a></li>
<li><a href=" URL  alamat blog "> JUDUL  1</a></li>
</ul>
</li>
<li><a href=""> JUDUL 2</a>
<ul>
<li><a href=" URL  alamat blog "> JUDUL 2</a></li>
<li><a href=" URL  alamat blog "> JUDUL 2</a></li>
</ul>
</li>
<li><a href=" URL  alamat blog”>JUDUL </a>
<li><a href=" URL  alamat blog "> JUDUL </a>
<li>
</li>
</ul>
</div>


Keterangan


Kode warna MERAH = Ganti dengan alamat dan judul postingan nya kawan


Silahkan berkarya

Baca juga artikel menarik lainnya :