Membuat Menu Drop Down Purple Style di Blog

Membuat Menu Drop Down Purple Style di Blog – masih sama seperti pada tutorial yang sebelumnya, namun yang berbeda hanyalah tampilan warna tema pada menu dan sub menunya atau sering disebut drop down. Jika pada menu yang sebelumnya berwarna coklat caramel maka pada menu drop down purple style ini berwarna ungu. Akan sangat manis tentunya terlihat apabila jika diterapkan pada template blog yang juga menggunakan warna latar ungu. Maka kombinasi color yang sangat serasi dengan tema warna menu drop down ini lebih terlihat menyala. Blog tidak hanya sekedar memiliki menu, namun juga akan memiliki tampilan minimalis yang lebih membuat visitor mungkin akan klik menu-menu yang sudah anda tampilkan pada menu drop down tersebut. Sangat menarik bukan jika visitor blog anda juga merasa senang dengan keadaan yang nyaman, tentu hal tersebut akan membuat visitor untuk lebih tinggal berlama-lama di blog kesayangan anda tersebut. Bagaimana untuk membuat menu drop down ini supaya dapat terpasang di blog anda tersebut? Maka berikut adalah tutorial cara Membuat Menu Drop Down Purple Style di Blog dengan menggunakan kode CSS:

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/AVvXsEir2dzP8R6caqI0gkAP1C6gkyGpm1tUo-0lqQKCJgOYnZ2O3RFTO4ExVWzqe-f_k7mpO1Jy0Zi-_kDELkmVKiXj9xicimDerPVA03xdX1DQTEdv3x1mhrBh9DGSAL7LhuBsLdeR7VtLG5AM/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/AVvXsEiUaa7ayYkTFkgdoVzXQGjc1CE1y-W3h0RuBimYXYpQszdpp63CtdbJIqC_i6jGLe7LvRLHFNaW6fSDxhhuhKUWOpdNRVzhliXCGd4DR5HmYJmYD9wBdaNJQUiOZsnWQ1vjCNFroSH5JfKZ/s82/left.png');
    padding-left: 1px;
    margin-right: -1px;
}
.menu .right_hassub {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdtUrJZqYV08YyiaPR9v39zsvyvICdAAv6UPrzrPuiRVsEjNx5mfO-iX1wXL_K-mqpexPN6QqJ1IAkvhJaYNVb7uFpabMtMr_dh1bxWhhECLndtsDRC-z_T5c3kAjD9YRfhdhp3YLWXA7/s82/right.png');
}
.menu .right_nosub {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdtUrJZqYV08YyiaPR9v39zsvyvICdAAv6UPrzrPuiRVsEjNx5mfO-iX1wXL_K-mqpexPN6QqJ1IAkvhJaYNVb7uFpabMtMr_dh1bxWhhECLndtsDRC-z_T5c3kAjD9YRfhdhp3YLWXA7/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:#200033;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1picZCQSTuStVN1B9M-J4pHNXeXNuBdL5CZW0bie1zJjeGy-iIVPLIcmk-3b3btTodC9fdPWtz67oW15oOUq8f4sMpZHRb6I-GCLcMFuZ7jSXi_bobX_9Ri5fzk0FfwoAufsKsjvLtMm/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:#200033;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKodbdNW1NYwxR5Pu3PlLonbKgo3WgV-yeraqrv6hac_3Km0y4bqgzIn6SXAq0Gt8HIuX5aiXY6V3VHduwaDahyphenhyphennpzQ1zUBRSaFgIiGDiivachnrgbmMa9yi_tCnIOwpnbIHox9XS_mIxE/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#200033;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vHjPsxKs7tY-cCqCpSGYYOoKuo4UZB4TgsED4Mo2MTDAYiwHiRHTpmaLNi6LlNCwUysGE0gg6fVqzpbSxg3VEX4sQ61HU0CzU2MhedP-6rkRIOaZN9SJV6F62WgOCRbEb3Px7rsBZp6C/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#200033;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1ivl_fd2NuSBhEk0WbK2e1PiHRtqGdHijsD71hbbBQh5x9V9lpH1A35zQMY-q3ctm1EgIk3yFCkor3x-z45djq5hRHYE5Ec2boBBbYoR6AekCN16495CcxHt6fLDJ_aPxy66nsUO7gOV/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;height: 28px;
line-height: 26px;
color:#200033;
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/AVvXsEjOo7do1UDor3pnp61U4FLGZfwio68Zz3iESzK_IHc1l-Jx4TLK4QQ1mCAuCEWl0jsBUyBBYquRXifYSI7NdNYc4C69oMrhIpbL7p0hO1pMXN5Tkg6qP_ZcLuSqh2a-Bv2oAPRywZoXjj1C/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/AVvXsEgiuZb0-s5vhnLaRgNYoE41HFDfWuajAhfZt_bAPKqhXluo7K12hYgOPqP2l-h9ozkH95Jwr1Qr-5CAPTV02pIIOG9nIUXnSdJ8wfzXnmIcFqzFy3Li1lyXZvxxbL0Ub1kIHlfBQwPUedAQ/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/AVvXsEixXYBy4vuVcx3VjVk5JyO6xMUEU6zrB-rMYZkgeJjRHAUY1OgnVtbIxMgfweDJgrxb9ITREN9aUWFNBhIcf9UzAtGSmqn0vSLBQmRkbFRY_TCxyBZVSjZ-Z_KFv1ygoyBFUOELdyCGJvnX/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 Purple 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 ubah tanda # dengan URL tujuan yang di inginkan.

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