CSS Multicolored Menu with Wrapping Effects

CSS Multicolored Menu with Wrapping Effects


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. 

Post a Comment

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

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

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *