Cara Membuat Menu Horisontal

Malah ini saya akan share cara membuat menu horisontal drop down pada blogger. kalau belum tau menunya seperti apa maka lihatlah gambar disamping. Cara membuatnya tidak sulit kok, yang penting teliti he..he.

Cara membuatnya adalah sebagai berikut:

• Login ke akun blogger anda
• Pilih Dashboard - Tata letak (Rancangan) - Edit HTML 
• Jangan lupa centang dulu Expand Widget Template. 
• Kemudian Cari code ]]></b:skin>  Ctr+F untuk mempermudah pencarian
• Letakan kode dibawah ini tepat di atas ]]></b:skin> 

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
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: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
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:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

• Kemudian Simpan Tempelate
• Setelah tempelate tersimpan, silahkan kembali ke Rancangan --> tambah gadget-->> Pilih HTML/                  JavaScript, kemudian  copy dan paste kode dibawah ini  kedalam  HTML/ JavaScript.

<div class="menu">
<ul>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/">Home</a></li>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/search/label/Software ">Sofware</a>
<ul>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/search/label/Anti%20Virus ">Anti Viruss</a></li>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/search/label/Internet ">Internet</a></li>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/search/label/Audio%20N%20Video ">Audio N Video</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Image%20Editing">Image Editing</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Office">Office</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Utility">Utility</a></li>
</ul>
</li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Tips%20N%20Trick">Tips N Trick</a>
<ul>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Software">Komputer</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Ilmu%20Website">Blogger</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Hacking">Hacking</a></li>
</ul>
</li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Operating%20Sistem">Operating Sistem</a>
<ul>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Operating%20Sistem">Windows</a></li>
</ul>
</li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/search/label/Billing%20Warnet">Billing Warnet</a>
<ul>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/2011/04/billing-warnet-free-download-full-crack.html">Bex-2006</a></li>
<li><a href="http://eksekutifnetkartosuro.blogspot.com/2011/04/billing-explorer-2007-full.html"> Bex-2007</a></li>
</ul>
</li>
<li><a href="http://alfalahsragen.blogspot.com">Partner </a></li>
<ul>
</li>
<li><a href=" http://alfalahsragen.blogspot.com ">Alfalah Comp</a></li>
</ul>
<li><a href=" http://eksekutifnetkartosuro.blogspot.com/search/label/Artikel%20Islami ">Artikel Islami</a></li>
</ul>
</div>

Keterangan :
Untuk Warna Merah = anda isi gengan URL tujuan anda
Untuk Warna biru  = anda isi dengan judul menu utama
Untuk warna  Ping = anda isi dengan bagian bagian /sub menu utama anda

NB: Tutorial ini sudah saya coba dan 100% berhasil.

Tweet