Join the list of our 279,000+ subscribers

There are many stylish menu bar for blogger working with CSS3. Here today I’m going to share an new CSS3 menu bar for blogger. This new Eye-Catching menu bar has Smooth Hover Effect and mouse over effect. This menu bar is easy to install it in your blog just in one step. This menu bar totally based on CSS coding and not with java scripts. While taking the mouse near it you can see color changing of links.

Well this post idea belongs to Blogger Spice. So I thank him for this wonderful Menu Bar and if you wanna check out the Demo just check out this Link. So now just check out below steps on how to install this on your blog.

How to add Eye-Catching menu bar for Blogger 

• Go to your “Blogger Dashboard”
• Then to your “Layout”
• Hit “Add a Gadget” then select “HTML/JavaScript”
• Now Copy the below code and paste it in “HTML/JavaScript” widget

<style>
#BSnav {
width: 960px;
margin: 0 auto;}
.bsnav{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FEFEFE;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#FEFEFE;}
a:hover {color:#FEFEFE;text-decoration: none;}
a:visited {color: #FEFEFE;text-decoration: none;}
ul.bsnav li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(252,124,11,1)),to(rgba(252,124,11,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(252,124,11,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=bsnavi] li a{background:#2E2E2E;}
ul[rel=bsnavi] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(252,124,11,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(252,124,11,1) 0%,rgba(0,28,78,1) 100%);}
<!–Eye-Catching Menu Bar–>
</style>
 <div id=”BSnav”>
<ul class=”bsnav” rel=”bsnavi”>
<li class=”active”><a href=”https://triposoft.com/”>Home</a></li><li><a href=”https://triposoft.com/”>About</a></li><li><a href=”https://triposoft.com/”>Blogger Tricks</a></li><li><a href=”https://triposoft.com/”>Tips</a></li><li><a href=”https://triposoft.com/”>Widget</a></li><li><a href=”https://triposoft.com/”>Tools</a></li><li><a href=”https://triposoft.com/”>Contact Us</a></li></ul>
</div>

• Once you finished pasting it customize it and Save it.
• Then place the Eye-Catching Menu Bar below header. 

Some Tweak and Instructions