Cara Membuat Menu Horisontal Drop Down

Cara Membuat Menu Horisontal Drop Down

Menu Horisontal Drop Down (MHDD) merupakan deretan menu isi blog yang terletak di bawah header. Selain menghemat tempat, MHDD juga dapat mempercantik tampilan blog.

Langkah awal Sebelum anda membuat MHDD, adalah anda harus menyisipkan satu slot elemen halaman di bawah header blog , ini bertujuan untuk tempat menu-menu MHDD tersebut. Jika anda belum paham bagaimana cara menyisipkan Satu slot elemen halaman di bawah header, anda bisa mengikuti langkah-langkah dari saya disini

Setelah anda berhasil di langkah pertama tadi, langsung saja kita modif blog dengan menu MHDD-nya.

Sebagai contoh,kita akan membuat MHDD persis dengan punya saya diatas. Jika anda bikin blog dengan template/Background hampir sama dengan punya saya, maka anda boleh mengikuti panduan cara buat MHDD sebagai berikut :

1. Login ke akun blogger anda

Pilih Dashboard - Tata letak (Rancangan) - Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

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;
}

3. Simpan template

Setelah Kode-kode itu anda simpan , maka pilih rancangan -- masukan kode-kode berikut di slot elemen baru dibawah header tadi

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>

Keterangan :

Untuk tanda Pagar ( # )= anda isi gengan URL tujuan anda

Untuk Warna ungu = anda isi dengan judul menu utama

Untuk warna coklat = anda isi dengan bagian bagian /sub menu utama anda

Untuk memasukan Kode-kode tadi , baca panduan singkat dari saya Cara tambah gadget HTML/java Script ke blog

> SELAMAT MENCOBA, SEMOGA ANDA BERHASIL <

^-^