Cool menu dropdown dengan rounded tab untuk blog anda

Pada pembuatan menu dropdown kali ini, kita akan membuat menu dropdown dengan sedikit rounded corner pada bagian submenu nya. Pembuatannya pun cukup mudah seperti pada pembuatan-pembuatan gadget lainnya pada blogspot. Menu dropdown ini cocok bagi anda yang ingin mempercantik blog anda dan bosan dengan tampilan navigasi bawaan pada blogspot. Gadget menu dropdown ini sangat cocok dipadukan dengan template yang memiliki corak warna yang cerah.
Untuk membuat menu dropdown ini, langkah-langkah yang harus dilakukan adalah:

• Masuk ke blogger anda, kemudian pilih blog yang ingin anda pasangkan menu dropdown.
• Pilih Tata Letak dan klik tambahkan Gadget di bawah header anda
• Pada pilihan Gadget, pilihlah gadget dengan tipe HTML/Javasscript
• Untuk bagian Judul dikosongkan saja, sedangkan untuk bagian Konten nya isikan dengan kode berikut:

<style type="text/css">
.wrapper1 { color: #44433f; font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif; margin: 0; padding: 4px 0 0;
}
.wrapper1 a { color: #E5F2FB; text-decoration: none;
}
.wrapper1 a:hover { color: #09548B;
}
.wrapper1 p { margin: 0 0 17px; padding: 0; line-height: 18px;
}
.wrapper { margin: 20px auto;
}
.nav { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIBqdyxzrVcvH1TkKKYGM_ZZrX7mOGwk7xlSCgClLFKyHCtWuF5Vo2pgRpWzndq5auH6vuPjdUIIuf646H-X4JCSLbkazQdqrHFXEp3qMN1W-IPVXJsC7ApnehK2UFn0vpdvseY0qfvD0/) repeat-x; float: left; width: 100%;
}
.nev-wrapper { clear: both; float: left;
}
.nav-left { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60nevASdZmB_NdopFRcvomcQgbKG5iT4KYTwrZ3wcllVA9PxslzYu9RP05oUVISRLeS5iF-1-77yjqBgXd_3ra1oirQI4W1Rk3TS4jaI-A5BHYqiOWlIXuHs6fnDRUrtKkhh_FDpigHo/) no-repeat top left; float: left; width: 11px; height: 41px;
}
.nav-right { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJnCaGziyZupPoI2jto0ZAJOeYOvIn6YpPYn_zx40kouhUshukaRUwoQIla_oWFZWS2LW4L6d4PhskPeKl58wOyvtICLgE9FzSljY1d_g-CtonVU2JIYFv0OuOmbyKCnkLxK3i1V4C2I/) no-repeat top right; float: left; width: 11px; height: 41px;
}
.nav ul { height: 38px; float: left; margin: 0; padding-top: 3px; list-style: none; font-size: 15px;
}
.nav li { float: left; padding: 0 7px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zbGsZ_j8v_XE3gPKTzjmpmca4LrUzAKAByB37e5DlIaalz83GRsF63tjcAbD3verRYycW_tVQ-Ms2mdvGIm8p4IE_tXF-pEQKy2qUQ_IveSNRQqc3rJRvaS9K7N-JLluWfKHE3yGoXI/) no-repeat right center; position: relative; z-index: 1;
}
.nav li.last { background: none;
}
.nav li:hover { z-index: 2;
}
.nav li a { display: block; line-height: 38px; overflow: hidden; float: left;
}
a .menu-left { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLK7KOYCXZ_zcywPRVcDIFMVjBBJDhSJuju70hne5NsXEfA6_2gNxpdwg6tqgAbE9q9niMmcYjOTzmlpcJwnAerkOKhTA3tICp1CmiOJwla6taWtLYaANgxYWy9GFYpttqdGBDH-ebYM/) no-repeat left top; width: 8px; height: 32px; line-height: 35px; display: block; float: left;
}
a .menu-mid { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSDaaIT4cZgJJZvwlP26wsPuTv96j8FL8ogVZovZ2IlVFas_-QZWl4s-lA6B9DgNaObOKOMHp7jajMJAQDIAvuRYIbENgAYasf-zz4Fhtxc0iuGMriitdn4wGLrn38fCkJkl1FBrwNUk/) repeat-x top left; height: 32px; line-height: 35px; display: block; float: left;
}
a .menu-right { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdMvV3rct9a1ZiCmE-0fqL8iaLYjUlsCvrGwggP5o9iRTOngTpfxYxJzbV6kdSJIQHw860MTtVbNmCmSEVr_LKAlW5jEbq7jzk5sv0RZHl7Xtdo9G60RhT5ITlSg25HfzKp4v7mBPguh0/) no-repeat top left; width: 8px; height: 32px; line-height: 35px; display: block; float: left;
}
.nav li a:hover .menu-left, .nav li.active a .menu-left, .nav li:hover a .menu-left, .nav li a:hover .menu-mid, .nav li.active a .menu-mid, .nav li:hover a .menu-mid, .nav li a:hover .menu-right, .nav li.active a .menu-right, .nav li:hover a .menu-right { background-position: 0 -37px; line-height: 35px;
}
.nav li a:hover, .nav li.active a, .nav li.hover a, .nav li:hover a { color: #09548B;
}
.nav li:hover .sub, .nav li.hover .sub { display: block;
}
.nav li .sub { display: none; position: absolute; top: 27px; left: 6px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_Ip0TxOj7GtLwo52_WHVYjO_EqwRDm7-eLMGemlLFUYrTAUPOllHYrMRFkn5Ut7Sr4OdCuSm-Dv9LRD4Qd9jQZ59Z3mJHx2iH2fJfoqtO9RvpktRGrocUpkcXMGPAl29jgdg1bvt208/) no-repeat; width: 186px; padding-top: 9px;
}
.nav li ul { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8N1fcx0bqGZTTAm9FfG7v3hczlDfqRrMvgwTj7WvvllqpQxrxSiyFrxmun7Xo0s51sOJ4oSzE_aNkw04MAZU4da6JfPs9s0cWKGjYGsWYCQdZflvrC0GfYGg1q34IvqVZxzOWc5Otlhw/) repeat-y; width: 162px; height: auto; margin: 0; padding: 0 12px 10px; list-style: none; font-size: 14px;
}
.nav li:hover li, .nav li.active li { width: 100%; padding: 1px 0 2px; border-bottom: 1px #C1D9F0 dashed; background: none !important;
}
.nav li:hover li a, .nav li.active li a { color: #09548B; background: none !important; line-height: normal; width: 156px; padding: 8px 3px 3px; text-indent: 1px;
}
.nav li:hover li a:hover, .nav li.active li a:hover { color: #fff; background: #165B9F !important; text-decoration: none; line-height: normal;
}
.nav li li a:hover, .nav li li a:hover { color: #fff; background: #165B9F !important; text-decoration: none; line-height: normal;
}
.nav .btm-bg { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDma9RIntOmxvLaRky_WoMTtlxknvMWeZ1IaFtiWVhHN8fKM9gqKtVOpdCbgqpMXNf8l-DKQSSJmUuindzWQybLHMU8ulVxhwJh6IfU4w11gJ-NP8A1p9Kx06Fnyonm3VR08V1Jv2AqY/) no-repeat; width: 205px; height: 9px; overflow: hidden; clear: both;
}
.content { width: 670px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoWJXmlBtLK_I8wrJAbCS2vTyZazcIBHhp05aJF1Ug9FvNm6ChALMSkM6IgGuxOC9h8MYWbUpOu5eJXhG2WQ3azet6B7p_HIt4zRwj_RGbeaawdQIiVU0e8laP4nDU45igdSnO8bnLNc/) repeat-y; float: left; padding: 10px 20px;
}
.content h1 { color: #333; font-weight: 400; text-transform: uppercase; font-size: 18px; border-bottom: 1px dashed #C1D9F0;
}
.content h2 { font-weight: 400; text-transform: uppercase; font-size: 14px; padding-left: 10px; margin-bottom: -5px;
}
.content p { padding: 0 15px; text-align: justify;
}
.content-bottom { width: 710px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtc6QIJBoC-3JWoXHq-3TAN6A438Yus4wqaZ8tKAY2YdZx7QKBtizOzvGw6oq42NAvn-HZ0tTCL7S9IrkVK6CO4UJAjkhp5qnvKs_MbhWaGO15ZoZB6QGPoGmy9q0Wj0QtiIPo3-A61WM/) no-repeat; height: 13px; float: left;
}
</style><div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav">
<ul id="navigation">
<li class="">  <a href="#"> <span class="menu-left"></span> <span class="menu-mid">Home</span> <span class="menu-right"></span>
</a>
</li>
<li class=""> <a href="#">  <span class="menu-left"></span>  <span class="menu-mid">Blog</span>  <span class="menu-right"></span> </a> <div class="sub">  <ul>   <li><a href="#">Archives</a></li>   <li><a href="#">Categories</a></li>   <li><a href="#">Top-rated Posts</a></li>   <li><a href="#">Most-viewed Entries</a></li>  </ul>  <div class="btm-bg"></div> </div>
</li>
<li class=""> <a href="#">  <span class="menu-left"></span>  <span class="menu-mid">Development</span>  <span class="menu-right"></span> </a> <div class="sub">  <ul>   <li><a href="#">Wordpress Themes</a></li>   <li><a href="#">Wordpress Plugins</a></li>   <li><a href="#">Mac OS X</a></li>  </ul>  <div class="btm-bg"></div> </div>
</li>
<li class=""> <a href="#">  <span class="menu-left"></span>  <span class="menu-mid">Tutorials</span>  <span class="menu-right"></span> </a> <div class="sub">  <ul>   <li><a href="#">Photoshop</a></li>   <li><a href="#">Illustrator</a></li>   <li><a href="#">Css, Html</a></li>   <li><a href="#">Post Your Tutorial!</a></li>  </ul>  <div class="btm-bg"></div> </div>
</li>
<li class=""> <a href="#">  <span class="menu-left"></span>  <span class="menu-mid">Gallery</span>  <span class="menu-right"></span> </a> <div class="sub">  <ul>   <li><a href="#">Personal Photos</a></li>   <li><a href="#">My Friends</a></li>   <li><a href="#">Tech</a></li>  </ul>  <div class="btm-bg"></div> </div>
</li>
<li class=""> <a href="#">  <span class="menu-left"></span>  <span class="menu-mid">Portfolio</span>  <span class="menu-right"></span> </a> <div class="sub">  <ul>   <li><a href="#">My Works</a></li>  </ul>  <div class="btm-bg"></div> </div>
</li>
<li class="last"> <a href="">  <span class="menu-left"></span>  <span class="menu-mid">Contact</span>  <span class="menu-right"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>

Demikianlah cara membuat menu dropdown pada blogspot anda dan happy coding !