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 !
You’ve been doing awesome with your template..I love the modification.Thumps up
Thanks Man !