CSS Multicolored Menu with Wrapping Effects

CSS Multicolored Menu with Wrapping Effects

Comments: 2
Blogger Menu

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.

menu widget

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://lh6.googleusercontent.com/-9SJ37J4kL-c/TYC9YVp4dnI/AAAAAAAACcQ/WlY2qCDPEt4/s1600/r_f.gif) no-repeat left top;}#BSmenu li a:hover.red{background:#c40d0b none;}#BSmenu li a.orange{background:#f26522 url(https://lh3.googleusercontent.com/-Qj4OShlsY-Y/TYC9XfCJVYI/AAAAAAAACcM/LoSVzK0xvXQ/s1600/o_f.gif) no-repeat left top;}#BSmenu li a:hover.orange{background:#f26522 none;}#BSmenu li a.yellow{background:#e4c016 url(https://lh4.googleusercontent.com/-n4u5mwinRNM/TYC9YiZh76I/AAAAAAAACcU/QlVskL8qFD0/s1600/y_f.gif) no-repeat left top;}#BSmenu li a:hover.yellow{background:#e4c016 none;}#BSmenu li a.green{background:#219e0b url(https://lh6.googleusercontent.com/-3fQLSz7KIrM/TYC9WZ1kTlI/AAAAAAAACcE/0Z7tBIqAIfQ/s1600/g_f.gif) no-repeat left top;}#BSmenu li a:hover.green{background:#219e0b none;}#BSmenu li a.blue{background:#2c88ce url(https://lh6.googleusercontent.com/-LFtaRnZqbLk/TYC9VzrS3ZI/AAAAAAAACcA/B_mx4kWgKhU/s1600/b_f.gif) no-repeat left top;}#BSmenu li a:hover.blue{background:#2c88ce none;}#BSmenu li a.grey{background:#939393 url(https://lh3.googleusercontent.com/-YsLP0wseGmw/TYC9XKuq-CI/AAAAAAAACcI/1BCufgFKAHI/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>


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

Related Post

Speak Your Mind

this is a beautiful menu..I like it. But how can I use more than 6 button??

Anonymous 5/19/2013

Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.


have a nice day

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *