Attractive Black Pure CSS3 Menu Bar for Blogger Templates

Attractive Black Pure CSS3 Menu Bar for Blogger Templates

data:blog.title
menu bar

CSS3 menu bar is always with sleek and cool effect. So I am trying to design some menu bar on basis of CSS coding. This menu bar is elegant black style with smooth hover effect . This menu is really awesome. When you just mouse over the different link then it will change the color. I have combining the color with black and orange to make eye-catching. Hope you would like it. 


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" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place the Gadget below header. that's it.


<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%);}
<!--Menu by www.bloggerspice.com-->
</style>
 <div id="BSnav">
<ul class="bsnav" rel="bsnavi">
<li class="active"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Blogger Tricks</a></li><li><a href="#">Tips</a></li><li><a href="#">Widget</a></li><li><a href="#">Tools</a></li><li><a href="#">Contact Us</a></li></ul>
</div>


Customization 

  • Change # with your Post link
Open Comment Box

Contact Form

Name

Email *

Message *