Membuat Menu Drop Down Green Style CSS3 di Blog

Membuat Menu Drop Down Green Style CSS3 di Blog – ini merupakan menu drop down CSS yang mempunyai style sama persis dengan menu drop down pada tutorial yang sudah saya share sebelumnya. Seluruh efek maupun bentuk sama persis dengan yang sudah ada sebelumnya. Hanya saja tampilan tema warna yang berbeda pada menu drop down green style ini dengan menu drop down brown style maupun menu drop down purple style. Mungkin ini terlalu bertele-tele untuk karena fitur yang sama namun terposting pada artikel yang berbeda. Hal ini karena jika saya posting sekaligus dengan menampilkan enam menu dengan tema yang berbeda maka sangat banyak langkah untuk saya pada saat membuat tutorial. Jadi untuk menghindari hal ini terjadi saya ambil singkatnya saja. Selain itu, jika pada satu konten namun terlalu banyak kode script juga tentunya malah membingungkan visitor untuk mencerna alur dari tutorial konten tersebut. Maka alangkah baiknya jika saya posting tutorial menu drop down ini satu per satu walaupun masih satu jenis menu yang sama. Supaya untuk lebih mudah menerapkannya, maka berikut adalah tutorial cara Membuat Menu Drop Down Green Style CSS3 di Blog:

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:#fff;
font-weight:bold;
width:81px;
height:42px;
text-align:center;
border-bottom: 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHuv9YG-eYQb5SvYyvURXe2Dvb6ZIKhyDdPAbGBdQqtnQ7FwZfShfi1SAObCuqnYFvHZwIAZC7WJ5eY1XbgmxnUrsX6ySxkZVQ46GrbD5wgKn2biOwVhWIVVQ2UZId5jFXbfEMjeZt1svw/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/AVvXsEjJqd00XNOGMavp06q6e6Ct-v9hV4B9JeQvu5wetyvgfjYlhBAFE7-Hk91CqqyWngWtXWzytkDaAye6bV2t63sZ4pT25ua7pJHAibqjgFW_iLTJB-wErzUuyAD4Chyxr7D8j7edgkf1g5Ou/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwTDtuiQsyX3I3ZQ6wVl8lsHsDH_ZN7jjyKINHJn31iVpiT6sUDfPr8zq1VDRy0G7MHHN_PVAo3Zn0syhyaRckEMXku0PXXiC_z6d24MsO6VsAphDTNQuM6rTRCMhxTcGJk2WQK5yEXyng/s82/right.png');
}
.menu .right_nosub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwTDtuiQsyX3I3ZQ6wVl8lsHsDH_ZN7jjyKINHJn31iVpiT6sUDfPr8zq1VDRy0G7MHHN_PVAo3Zn0syhyaRckEMXku0PXXiC_z6d24MsO6VsAphDTNQuM6rTRCMhxTcGJk2WQK5yEXyng/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:#223601;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-3mCsq1M2EaHGD9sV9BeRH-DFevlA_uSEys1U-qkMK18Vzf0CmBhqC3NYeLIbiSc4AZlJiGLdhjWywKhUqidWMyCGuyhS06CrqAK_ulmAsi7utqUVQaTuZ9yR8wuLjbKmygzsih-zn-G_/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:#fff;
}
.menu ul li:hover ul li:hover a.center_hassub {
background:#6fc;
color:#544a3a;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover .left_nosub {
color:#223601;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNriiehwKxPQhg5Rm6V6bLC8Co1iTAiXdGXmfnLvLVm-brCwMfVakD7HvXINJqW51OC6MjDhZVQwIDJrH-86O0MQks3I6u8NkP8qh6uf52YHXThwNm-CNQwYmPNVz2jq3Jpi_ErgVi140/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#223601;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhesl9Cyd5Gv7Rj1dv4imxjmO_2XZYUyKc36gPZf4StVYdtTLpVCSjbO2quRKTZ4i9vHaKNmkxMZ90VsyFVvdoLDE_VEBx0R2_QHeoMFCivKcp3ZvfsPanD9Fyjn9BzmLcr3heNwKXkJm7J/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#223601;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fHz_bDB2UUAQZeNgRIxDFUvSM0MmenPYTH1oiNg9rgBsCxCR77Qt3qvOy6xj7ZWGiRDBRIajOugzQlqp7BBZzdyRMvSlhdobubhRcQXYBDnUpLAiVt5soS9TsUjTqfYmoOWQFI4MMXi5/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#223601;
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/AVvXsEgZjN6gbRTZF8ugti1-IdxD4JuQStjztikuJF7HL2z1ErwtB3p12aiGCPgz89_ryVexkGAHJCeLkbG70KV0v0fM9N6bv4hzBE5iGT5kQWNfxrT4DcO8ziQl1Ct4NuLZOzRj9w60Ep7UGJAK/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/AVvXsEiLfQPd74cRUd_IndoWpuv0RXtm_hjQi-vDUoi3NrU4Ex6aNNTBIj3NGbPGgRahAhail-NyVi4ZT8Yog2mAy2IIOHTVPIiMIBtXhklesHIYICUinVQ3hzpVETiApkGEzQhZEjT5MNkfriHe/s152/sub_active.png');
margin-right: 1px;
}
.menu ul li:hover ul li a:hover {
color:#fff;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRmoZjXvO9_Xg1Fi-bs6bUzlkjC8FlC2bdR6QbhCi6DtSPIv7eDUC_2S1_mSTM-paz60mXlWJk60skwGkE3BIoCVzq5v9w7UMpgzFEAivFAdWhuAtPShuZOnCxDmJQbRTp5FVKSn4f-pPe/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 Green Style CSS3 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 ubah tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara Membuat Menu Drop Down Green Style CSS3 di Blog.