Membuat Menu Drop Down Brown Style di Blog

Membuat Menu Drop Down Brown Style di Blog – masih melanjutkan tentang tutorial membuat menu pada blog, sebagai intermezzo kemarin sudah saya posting tentang cara membuat gallery photo efek polaroid di blog dan sekarang kita mulai lagi dengan pembahasan mengenai tutorial cara membuat menu drop down. Drop down menu brown style ini bagi yang menggunakan template blog dengan tema warna yang terang mungkin akan kurang sesuai dengan warna dasarnya,  akan tetapi tidak ada salahnya jika ingin mencoba apabila mau menerapkannya terlebih dahulu. Tampilan yang minimalis tidak membuat menu ini terlihat rumit, tampilan drop down dengan sub menu yang rapi maka akan tampak pula mempercantik blog. Untuk lebih lanjut lagi, maka berikut adalah tutorial tentang cara Membuat Menu Drop Down Brown Style di Blog dengan cara pemasangan yang mudah:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

.menu {
font-family: "Verdana", Arial, san-serif;
width:auto;
height:42px;
position:relative;
font-size:11px;
margin: 0;
}
.menu ul li a {
display:block;
text-decoration:none;
color:#EBE0D5;
font-weight:bold;
width:81px;
height:42px;
text-align:center;
border-bottom: 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQrRpBbLZg6YJNwcY9zbXtWNh4iIRKn2LbmUm0mSHn3zO5_3IKpTvvJyLupIjkdCXJ0zew5wmNxLeKVgDQjRGqfyPJ9VodO9KWx-NNIAi897NTdDATIhXFXMNVs-4IwUJtOmPtKQDSQ1D/s82/center.png');
line-height:48px;
font-size:11px;
overflow:hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSYDTfBU9QK7g4acslSkpYaBWSttR44YF7T0BkM1H96I57IkGLWYEtIdx75PG8y6O9AtglLQKMPNPUIEdtix33uREM9-R1oWjyl-Vfo-2cHHxK9waz7y2xUBQLWZ3gulyxYaHyIaSPl4-/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun7FxXk4Mxq9WwIuc3LcJJLI43El1CNn_drNwlM_pOISlnkOh1gIwj6gzDOHPIoy2fkjldOYRkvNGN-K78o8niOEUotnEdsd8aAMjJYF80dO_akURtQl6YgR8Y1miGwQSsZyWGoc2jsrL/s82/right.png');
}
.menu .right_nosub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun7FxXk4Mxq9WwIuc3LcJJLI43El1CNn_drNwlM_pOISlnkOh1gIwj6gzDOHPIoy2fkjldOYRkvNGN-K78o8niOEUotnEdsd8aAMjJYF80dO_akURtQl6YgR8Y1miGwQSsZyWGoc2jsrL/s82/right.png');
}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {
color:#381B01;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IVQzfQEwPzf4G0IYcTacnR5YhRdD1MoKKW3HE-bGB9rhW3qMglFTpwKt1zwjrAuTZrdIg33XhoZcdyHDeT2mWC5gRj91sDUut5YDrjHEiPLggFyhyf0-8V_4bsSIAMCcS45AHQIrYPp6/s82/center_hassub.png');
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:42px;
left:0;
width:152px;
margin: 0;
padding: 0;
}
.menu ul li:hover ul li a.center_hassub {
background:#6a3;
color:#EBE0D5;
}
.menu ul li:hover ul li:hover a.center_hassub {
background:#6fc;
color:#381B01;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover .left_nosub {
color:#381B01;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExBwNkZy0HijFbREVl2CX-K2pLGnJjajncuuNgLZPmjUWAog2_FimwoSL5i1Qfh47Vh14Uyze39ENvKedIaLD4EhcXiLO-E8thkKKG2zoBq5RLrGINHhodt1zY_quawB-vkMJzbdovdNE/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#381B01;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga7ITgx2M0VpEOuzikMJkGnPbvOog7cIGmRTiGjwToH7FPFF0baQ1L2mgDHdZzfB-Q1t2jlejnBd0YnKiu0yafcy4gxjzVPOpZtHTss-KKOkiBf31A1NYIzeMHEtBLHx80n-X29XR0krrK/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#381B01;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0PXb6kyS7VZ9YdDURUpyTcJ1wuNmW8kNm8oWAraQ871_pmYBHZzBMPH77lQSXtEJh0NH_g53RvdTX7UtIRIxI3UJ0bvrCoNpTZiLN7GlJGYA0MFtNbvNJ2KZbB2JPurwMTapjlFI_vva/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#381B01;
width:142px;
text-align:left;
margin: 0; padding:0 0 0 11px;
font-weight:normal;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaYw6XFxCqdsf7eHC6krg2BJw1pQn9dCPLAc3RL4EwA0YZ5f0DNFFn8S6tNBLcT8Qsdh0Q6_JgypgOHIrBIT-hqEfqnuvDexrwyK1jtZIar-3DpfXS2q0kvNMCgczXMME3MxAgU5Efa_xW/s202/dropdown.png');
background-repeat:no-repeat;
background-position:bottom left;
}
.menu ul li:hover ul .sub_active {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NPD5o2u4eRtnSv8x5uUBoe0Mm-4aE7S51oQ9F3QS1woy2f-AP7rg5t8TAgNFZPAIhA3c4dLjo95E0X7Sb9BytcLvqgy5M2A1laEpDuZqibIqpGzyQ9gQBvPH1YHGI-nNoy_lGGKxoUm9/s152/sub_active.png');
margin-right: 1px;
}
.menu ul li:hover ul li a:hover {
color:#381B01 !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sPQEpoeTCsUEaXmoXlU5nwRwWSnK1kodEyw3-6CbOqL6iUxt1xEBFt5Eat61WTGbxNPwDboAwY1ZW0vok2jH0clB4VCGc9TGA7y8hohVeb2gjuVjS3J2ahwg4ded2gLxhZK4wkqzhPfE/s152/sub_hover.png');
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Menu Drop Down Brown Style di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:

<div class="menu">
<ul>
<li><a class="left_nosub" href="#">Home</a></li>
<li><a class="center_hassub" href="#">Tutorial</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">Javascript</a></li>
    </ul>
</li>
<li><a class="center_hassub" href="#">Designs</a>
    <ul>
    <li><a href="#">Website Designs</a></li>
    <li><a href="#">Logo Designs</a></li>
    <li><a href="#">Banner Designs</a></li>
    <li><a href="#">Print Designs</a></li>
    <li class="sub_active"><a href="#" style="color: rgb(255, 255, 255);">Request Custom Design</a></li>
    </ul>
</li>
<li><a class="center_hassub" href="#">Download</a>
    <ul>
    <li><a href="#">Ebook</a></li>
    <li><a href="#">Software</a></li>
    <li><a href="#">Film</a></li>
    </ul>
</li>
<li><a class="center_hassub" href="#">Tips Trik</a>
    <ul>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">SEO</a></li>
    <li><a href="#">Computer</a></li>
    </ul>
    </li>
<li><a class="right_nosub" href="#">Contact</a></li>
</ul>
</div>

Keterangan:
Silahkan ganti tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Save, maka selesai sudah dan silahkan lihat hasilnya dari tutorial cara Membuat Menu Drop Down Brown Style di Blog.