Membuat Menu Drop Down Blue Style CSS3 di Blog

Membuat Menu Drop Down Blue Style CSS3 di Blog – mungkin jika seluruh background dari menu drop down ini hanya menggunakan kode CSS dan tidak memerlukan background dengan format gambar, tentu saya tidak akan share menu ini pada url halaman posting yang berbeda. Hanya saja setiap background dari masing-masing menu ini berbeda dan itupun menggunakan format gambar, tidak menggunakan background menu atau warna dasar warna dasar yang memakai warna heksa. Jadi akan terlalu susah dan rumit untuk membagikan tutorial menu ini didalam satu postingan dengan menu drop down yang masih satu style dengan menu ini apabila dilakukan dengan sekali tutorial posting. Apalagi jika visitor dalam istilahnya masih awam tentu akan merumitkan dalam pemahaman konten maupun cara penerapannya saat ingin mencoba kedalam blog masing-masing. Seperti yang sudah terlihat pada gambar diatas, menu ini berwarna dark blues atau bisa dikatan biru tua yakni warna biru kehitam-hitaman yang tentunya sangat kontras apalagi jika diterapkan kedalam blog yang sudah menggunakan warna biru sebagai warna latar default template. Tentu tidak perlu banyak merubah kode warna untuk menyesuaikan maka secara langsung apabila menu ini sudah terpasang makan akan dengan sendirinya sudah terlihat manis menghias blog anda. Untuk pemasangannya kedalam blog, maka berikut adalah tutorial cara Membuat Menu Drop Down Blue 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/AVvXsEgq3RovJeAU5VYVQaogELQ67foMwJUmticDDfkfFrSVxeu8_zdog96ucUx9gbd4COWS_CmwQvxKcN6gFIEXbJKIxYIFw1kiBCPk7WKEAxO4mqLlsWtX0-E-NNaNKSmMdPH_Po7cE5SDRYYV/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/AVvXsEj8Z2zjgyRzaKzol-AjGi5RHImUBRxdIGxyZ0nJC3OiGChx81vT9D4yWl-QgAKo0zoy0sKGdxkYe5yZoDtqWdF00upgk2feqZ_8kSacHmU-dPUX6tMd8994nlWSwlE52IkMMgXXhqANSMh2/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9XfNVEU9ywJnhNrrIxqI1VHyIOzcdqrKSkNZ38oIuDCaSgZylcmu6NUNUa9Cx7qE844my9pxizaj59UonNwJmtT88MOW5DdMWYSezFeaxWz31Xh514VHj1O3e3AR8N4G4md-3vVQP5tD/s82/right.png');
}
.menu .right_nosub {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9XfNVEU9ywJnhNrrIxqI1VHyIOzcdqrKSkNZ38oIuDCaSgZylcmu6NUNUa9Cx7qE844my9pxizaj59UonNwJmtT88MOW5DdMWYSezFeaxWz31Xh514VHj1O3e3AR8N4G4md-3vVQP5tD/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:#043454;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWDcEMZvJCvrMxrTnHobRtFUTmX6yU5SanuZdiikBGhRrh69ZWJcR7zu_CFg-FYM1Oxx_6oXKhrNARgzXpwYdJ5TTQEYzeL0U9Q9C62UgYmj-Y9JgpfKK_VNOdKSBV7uAfI-DmM2PfnMg/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:#043454;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9vaUtlLfg8NrUekwf0NlVUP87O3pT_FydbnYhDAixcbzXvMTMWyadXTW_ubNMS3FLr0pIE8vGLWMNjpW9SQ-KwKvJMSqx21Orzyrz4He4MXL9Xupxhhkrx-O3duuxu8c6Bi7hBbfp5gJ/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#043454;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBMvrI4pCoNzLbKbpjzZH-z32nYYHr_TTXXOcxiQ6wqiVhSWb_Kmnh1tIOeuKOQBJwk8A0OHbDqEXBk8Ot45vv_ESFPoAKX1JuF-IlOuP30DOXw8nHUQ3XqR3oJplNwlGwvnedmgJcAIP/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#043454;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66nzuF-KWErDh1_FgITblAoeuoGxD4PlYr2G_i-UU7U9k3XIBiDVDnb9SzDDP7G3LtKb_rJOYM3n4OqhSCWtgjQCN566FGsvQ1igfYwUbdPAaGfSvUdgS5gqVD7W0GJZObJXg9Ugy-kOT/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#043454;
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/AVvXsEjcJKOj4DpndN6k28dZ576KVmvWgQ3JoNTDkD1ff1W_0wa99UOJ0ickLnhuyeWnI5le1VLOqhcJrXo-bE7E722Rmza4t43pV4BUTt6O7jHlqMoIUsMRQwe0G5oy5IPFRBhg0lxeB0xmsrHA/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/AVvXsEi3P4wjlzT5Pn5QqJbj0-G3r2lmr5iBZ2fGkSdU5iJ_SNp2iF8hR2RJe5hApN-eVk1PdmuHDZ3W2plhWquRkf0HfBF6n2yTWrkpXmMfY71kMZH4SdiQeyKrMEVLJoqOgPeBku5w4NQp7X9b/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/AVvXsEijrxkwJc6khJw5hIVCxzywE-SKsBnGt8-_fhUYbrL1zGB8Y33aSebniLoBho5-zurVGBfgeh1vqNC8kspEZ4lMy1wbR7VSNoKIyYWOthPvJUjVROxOiSw7v7oHXNBPDnvZLYBAAv0QFSBO/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 Blue 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 halaman yang di inginkan.

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