Cara Membuat Menu ( Laman ) Drop Down Di Blog

Sobat, bisa jadi selama ini kita mengganggap bahwa pull down menu atau sub menu yang terdapat dalam bilah menu horizontal sebuah blog hanya dapat dibuat pada blog yang menggunakan kustom template saja. Hal ini disebabkan karena tiap kali kita menambahkan menu baru dengan menggunakan pilihan ‘Laman (Page)’ yang terdapat di dasbor Blogger, maka menu tersebut akan ditampilkan dalam satu baris tab menu, sehingga tampilannya terkesan kurang rapi apabila jumlah menu yang digunakan cukup banyak. Namun tahukah Anda bahwasanya kita juga dapat melakukan kustomisasi pada template standar yang disediakan oleh Blogger guna menambahkan sub menu ke dalam tab menu  yang disediakan. 

Perlu diingat bahwa apabila jumlah menu yang ditampilkan cukup banyak, sedangkan dari menu yang ditampilkan tersebut terdapat beberapa menu yang memiliki kategori sama, maka sebenarnya akan lebih efektif apabila menu dengan kategori sama tersebut dikelompokkan menjadi satu dalam sebuah sub menu atau pull down menu.  Dan inilah salah satu tujuan dari kustomisasi template standar Blogger ini, yaitu untuk mengelompokkan beberapa menu yang memiliki kategori sama ke dalam sebuah menu dengan pull down menu atau sub menu di dalamnya.

Nah, untuk keperluan tersebut maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan

Perhatikan

1. Langkah Pertama Loggin dulu ke blog

2. Klik rancangan --> Terus Klik Edit HTML jangan lupa centang Kotak Expland Widget

3. Cari Code ]]:/b:skin> lalu Copy Code dibawah ini Di Atasnya

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

;,Courier,monospace;">

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;

4. Terus cari code
terus copy codenya Di Bawah:

<div class='menu'>
<ul>
<li><a href='Ganti Dengan Link Kamu'>Home</a></li>

<li><a href='Ganti Dengan Link Kamu'>Download �</a>
<ul>
<li><a href='Ganti Dengan Link Kamu'>Kasih Judul !!!</a></li>
<li><a href='Ganti Dengan Link Kamu'>Kasih Judul !!!</a></li>
<li><a href='Ganti Dengan Link Kamu'>Kasih Judul !!!</a></li>
</ul></li>

<li><a href='Ganti Dengan Link Kamu'>Game dan Cheat �</a>
<ul>
<li><a href='Ganti Dengan Link Kamu'> Kasih Judul !!! </a></li>
<li><a href='Ganti Dengan Link Kamu'> Kasih Judul !!! </a></li>
<li><a href='Ganti Dengan Link Kamu'> Kasih Judul !!! </a></li>
</ul></li>

<li><a href='Ganti Dengan Link Kamu'>Category / Label �</a>
<ul>
<li><a href='Ganti Dengan Link Kamu'> Judul Category !!!</a></li>
<li><a href='Ganti Dengan Link Kamu'>Judul Category !!!</a></li>
<li><a href='Ganti Dengan Link Kamu'>Judul Category !!!</a></li>
<li><a href='Ganti Dengan Link Kamu'>Judul Category !!!</a></li>
</ul></li>

<li><a href='Ganti Dengan Link Kamu'>Judul !!! �</a>
<ul>
<li><a href=' Ganti Dengan Link Kamu'> Kasih Judul !!! </a></li>
<li><a href=' Ganti Dengan Link Kamu'> Kasih Judul !!! </a></li>
</ul></li>

<li><a href='Ganti Dengan Link Kamu'>Login Lewat �</a>
<ul>
<li><a href='http://id.yahoo.com/?p=us'>Yahoo</a></li>
<li><a href='http://www.facebook.com/'>Facebook</a></li>
<li><a href='http://twitter.com/'>Twiter</a></li>
<li><a href='http://www.blogger.com/'>Blogger</a></li>
</ul></li>

<li><a href='Ganti Dengan Link Kamu'>Judul !!!</a></li>

</ul>
</div>

5. Klik Save 
         NB : Warna Merah : Ganti Dengan Link Kamu , Itu Dengan Link Sobat
             Warna Biru : Kasih Judul !!! , Itu Yang Di Dalam