Tips blogging :Cara Membuat Drop Down Menu Di Blog

Tujuan untuk membuat menu dropdown ini di blog adalah selain mempermudah para pengunjung untuk mencari artikel yang di cari juga menjadikan tampilan blog terlihat profesional. Cara pemasangannya pun tidak begitu susah karena tinggal menambahkan code drop down menu ke template dan widget.

Sudah siap untuk mengetahui bagaimana caranya ? Sekarang kita masuk ke tata cara membuat drop menu di blogspot ini. Langkah pertama adalah masuk ke template lalu pilih edit HTML, setelah itu cari kode ]]></b:skin> untuk mempermudah pencarian bisa menggunakan CTRL+F atau F3. Setelah ketemu masukkan kode berikut tepat di atas kode tersebut. 

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#FFFFFF;

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:#FFFFFF 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;

}

Setelah kode tersebut di masukkan, lalu klik save atau simpan tergantung bahasa yang di gunakan. Sebagai catatan, kode yang di tebalkan adalah kode warna yang bisa di ganti sesuai tampilan blog masing-masing. 

Apa kah sudah selesai tugasnya ? Belum kok, sekarang masuk ke tata letak lalu klik tambah gadget. Setelah itu pilih HTML/Java Script dan masukkan kode berikut :

<div class="menu">
<ul>
<li><a href="Link">Home</a></li>
<li><a href="Link">Nama Menu1</a>
<ul>
<li><a href="Link">Nama SubMenu1</a></li>
<li><a href="Link">Nama SubMenu1</a></li>
<li><a href="Link">Nama SubMenu1</a></li>
</ul>
</li>
<li><a href="Link">Nama Menu2</a>
<ul>
<li><a href="Link">Nama SubMenu2</a></li>
<li><a href="Link">Nama SubMenu2</a></li>
</ul>
</li>
<li><a href="Link">Nama Menu3</a>
<li><a href="Link">Nama Menu4</a>
</li></li></ul>
</div>

Setelah selesai klik simpan dan drop down menu telah muncul di tampilan blog. Sekarang blog yang di miliki telah terlihat seperti blog yang profesional.

Catatan :

1. Ganti tulisan Link dengan link yang di inginkan

2. Ganti Nama Menu dan Nama SubMenu dengan nama yang di inginkan

3. Jumlah Menu dan SubMenu yang ingin di tampilkan tidak terbatas, tergantung selera masing-masing.

Semoga berhasil mencobanya...