Main Menu Bar Dengan CSS

Cara membuat menu Drop Down  dengan CSS:
Ikuti cara berikut ini:

1. Sign in di akun blogger.com Sobat

2. Pilih blog yang mau di terapkan menu ini

3. Pilih menu >> Template (tampilan blogger diperbaharui) lalu >>Edit HTML;

4. Beri tanda centang pada tulisan >> Expand Template Widget;

5. Carilah kode yang kurang lebih seperti berikut ini ( gunakan ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Lalu pastekan Code berikut ini di atas code tersebut:

Setelah itu >> Simpan Template, dan tutup Edit Template.
Kemudian klik : Tata Letak >> Tambah Gadget/Add Gadget >> HTML/JavaScript, lalu pastekan code berikut:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Home</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Menu 1</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 1 a</a></li>
<li><a href="#">Sub Menu 1 b</a></li>
<li><a href="#">Sub Menu 1 c</a></li>
<li><a href="#">Sub Menu 1 d</a></li>
<li><a href="#">Sub Menu 1 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 2</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 2 a</a></li>
<li><a href="#">Sub Menu 2 b</a></li>
<li><a href="#">Sub Menu 2 c</a></li>
<li><a href="#">Sub Menu 2 d</a></li>
<li><a href="#">Sub Menu 2 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 3</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 3 a</a></li>
<li><a href="#">Sub Menu 3 b</a></li>
<li><a href="#">Sub Menu 3 c</a></li>
<li><a href="#">Sub Menu 3 d</a></li>
<li><a href="#">Sub Menu 3 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 4</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 4 a</a></li>
<li><a href="#">Sub Menu 4 b</a></li>
<li><a href="#">Sub Menu 4 c</a></li>
<li><a href="#">Sub Menu 4 d</a></li>
<li><a href="#">Sub Menu 4 e</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />
Ket: ganti tulisan Menu 1-Menu 4 dan Sub Menu dengan Nama Menu yg sobat kehendaki
"#" ganti dengan URL blog sobat.
Letakan gadget nya di atas atau di bawah Header Blog....dan SELESAI.

Artikel terkait :