New Eye-Catching Menu Bar for Blogger

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.

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   Replace "https://triposoft.com/" with your link That's It ! Need Any Help ?  This is the easiest method for Adding Eye-Catching Menu Bar in Blogger. I simply hope I did justice with the post by creating it as simple as attainable. If you're facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7.  Share your thoughts in comments !

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 

  • Replace “https://triposoft.com/” with your link
  • That’s It !

Need Any Help ?

This is the easiest method for Adding Eye-Catching Menu Bar in Blogger. I simply hope I did justice with the post by creating it as simple as attainable. If you’re facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7.  Share your thoughts in comments !
About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

2 Comments

  1. Anz Joy

    You’ve been doing awesome with your template..I love the modification.Thumps up

      
  2. Thanks Man !

      

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.