0 CSS Multicolored Menu with Wrapping Effects

Menu is the integral part of any blog templates. And by using Stylish menu bar you can make your blog's look more gorgeous. So I am sharing with you in this tutorial a awesome multicolored menu with wrapping effects. You will get 6 multicolored menu button 

and when you will mouse over the menu then it will unwrap a little part on top right corner. And it is very easy to Install.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Drag the Gadget below Header.

Step 5 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>/* Menu with peel effect by www.bloggerspice.com-----*/#BSmenu{width:100%;color:#666;font:12px/18px Tahoma, Arial, Helvetica, sans-serif;}#BSmenu ul{list-style:none;padding:5px;}#BSmenu li{list-style:none;display:block;float:left;height:37px;line-height:37px;text-align:center;margin:0 5px;}#BSmenu li a{display:block;float:left;font-weight:bold;color:#fff;text-decoration:none;padding:5px 35px;text-transform:uppercase;}#BSmenu li a:hover{text-decoration:none;}#BSmenu li a.red{background:#c40d0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhkZ2NwioUcAOgfkJss8ETil9HDpjYQwxy3GBzVBsSBD9j4mEzrSWAL9-AsGcBAM3Y0yzVOY6EZW_AXPGfEG_UYonzCudiCozrYgzH74CKVW24wvWrT03vIFIX2YltXleZ140wNAHqhEj/s1600/r_f.gif) no-repeat left top;}#BSmenu li a:hover.red{background:#c40d0b none;}#BSmenu li a.orange{background:#f26522 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbX8SWpuNv6A89Vr2zHt6zteXJz0Zv4IBaUDTWUuckZ9WHo5TI0FoizhSs5Bwe2kFgVNlSO57Pn3_Dy-PXU_3rYxjeQLTpZU6ili32s0DP16Cgavp-ml5EM8hZA8ByGB_lkbmiVxFdL4H/s1600/o_f.gif) no-repeat left top;}#BSmenu li a:hover.orange{background:#f26522 none;}#BSmenu li a.yellow{background:#e4c016 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlekhp4gVcJt9qEdQCgVLQ997uMtHKNf7ABRdLyn2qS5kHTtdvk2Qm9bUpHuqbzpDN3Xtn7VJl_L3A91rBQyen71PFG7rzTch_VCSIS4vLCNzaLaFX9tgfd0cu6y-PBFx2o-2H93YoARpX/s1600/y_f.gif) no-repeat left top;}#BSmenu li a:hover.yellow{background:#e4c016 none;}#BSmenu li a.green{background:#219e0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpXZ-ew4QAz90d3ttveizSW2oftPXtM_v0FfTOMU24MDsgBPAbjmY1F1r4OleIq9eaLcJ8gEoBI7uLX08_HqB4GQob89UFLQZ7et6DZ96SNXixdHqf0InffHvAT0egmmVhCq4OM6VxVdR/s1600/g_f.gif) no-repeat left top;}#BSmenu li a:hover.green{background:#219e0b none;}#BSmenu li a.blue{background:#2c88ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFj86KBoTFUUvBmtCKkbhs04S5hjjmDzMzeq-Qc_EMf6_CKYQ9V7uior73AlMQy0NO_CBVwHRyYv751uyHG05Bw6ekPEStpqWoPwQtI2uXnfhZbylKIjWcCTi-3SAYd-X6AVcUmxNO77J6/s1600/b_f.gif) no-repeat left top;}#BSmenu li a:hover.blue{background:#2c88ce none;}#BSmenu li a.grey{background:#939393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3NmIS1dIRwzWT3APd0UIsAsrewD9N8wVhoi2xNQUu1gmHzZW3u8kMtYneQTi8f2UsiKqXoldBTCsbkv-vTWfqmCQWRLikSIHgO3M_xG8jvgqiWXg0WVZIqR1zzCkvWOVDm0VY6ZYaUhC/s1600/gr_f.gif) no-repeat left top;}#BSmenu li a:hover.grey{background:#939393 none;}/*menu end-------------------------*/</style>
<div id="BSmenu"><ul><li><a class="red" href="URL Here">Home</a></li><li><a class="orange" href="URL Here">About us</a></li><li><a class="yellow" href="URL Here">HTML</a></li><li><a class="green" href="URL Here">Widget</a></li>
<li><a class="blue" href="URL Here">Contact us</a></li>
<li><a class="grey" href="URL Here">Sitemap</a></li>
</ul>
</div>

Customization:

• Change all URL Here with your own links. And Save it.