Add Cool Pure CSS3 Navigation Menu Bar

0
Add Cool Pure CSS3 Navigation Menu Bar

How To Add Cool Pure CSS3 Navigation Menu Bar For Blogger

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* CSS Code for the menu bloggersstand.blogspot.com */
ul.bloggersstand_cssTabs   {

 background: #848383;
 border:solid 1px #606060;
 padding: 0 75px;
 width: 705px;
 margin:20px 0;
 font-size:12px;
 font-weight:bold;
 background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
  box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 border-radius: 8px 8px;
 -moz-border-radius: 8px 8px;
 -webkit-border-radius: 8px 8px;

}
ul.bloggersstand_cssTabs > li {
 background:#989898;
 color:#3a3a3a;
 border:solid 1px #606060;
 border-bottom:0;
 display: inline-block;
 margin: 10px 1px -1px;
 padding: 8px 20px;
 background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 text-shadow: 1px 1px 0 #d3d3d3;
}
ul.bloggersstand_cssTabs > li.active,ul.bloggersstand_cssTabs > li:hover {
 background:#ededed;
 background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
 cursor:pointer;
}
ul.bloggersstand_cssTabs.blue{

 background: #237e9f;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#217092, #2d97b8);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d97b8), to(#217092));
 box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
}
ul.bloggersstand_cssTabs.blue > li,ul.bloggersstand_cssTabs.blue > li:hover {
 background:#2ca0c1;
 color:#1a4760;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#2ca1c3, #2687aa);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2687aa), to(#2ca1c3));
box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
text-shadow: 1px 1px 0 #8cd9e8;

}
ul.bloggersstand_cssTabs.blue > li.active {
  box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
ul.bloggersstand_cssTabs.orange{

 background: #d75125;
 border-color:#9c2c09;
background:-moz-linear-gradient(0% 100% 90deg,#d44b22, #ea753d);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ea753d), to(#d44b22));
 box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
}
ul.bloggersstand_cssTabs.orange > li, ul.bloggersstand_cssTabs.orange > li:hover {
 background:#e1693e;
 color:#5a2818;
 border-color:#9c2c09;
 background:-moz-linear-gradient(0% 100% 90deg,#e47a48, #dd5733);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd5733), to(#e47a48));
box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
text-shadow: 1px 1px 0 #f3c6b3;

}
ul.bloggersstand_cssTabs.orange > li.active {
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<ul class="bloggersstand_cssTabs">
 <li class="active" ><a href='#'>Home</a></li>
 <li><a href='#'>Points</a></li>
 <li><a href='#'>Percent</a></li>
 <li><a href='#'>Contact Us</a></li>        
</ul>
<ul class="bloggersstand_cssTabs blue">
 <li><a href='#'>Home</a></li>
 <li class="active"><a href='#'>Points</a></li>
 <li><a href='#'>Percent</a></li>
 <li><a href='#'>iContact Us</a></li>
</ul>
<ul class="bloggersstand_cssTabs orange">
 <li><a href='#'>Home</a></li>
 <li><a href='#'>Points</a></li>
 <li class="active "><a href='#'>Percent</a></li>
 <li><a href='#'>Contact Us</a></li>
</ul>
 *Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!

If you have any query regarding Cool Pure CSS3 Navigation Menu Bar for blogger/blogspot.very attractive Pure CSS3 Menu Bar,it give amazine look to your website or blog.Feel free to ask,just drop your comment below.
how to Add Cool Pure CSS3 Navigation Menu Bar for blogger blgspot on it,css3 effect and html menu navigation bar for website or blog attractive,blue,orange,grey colour menu bars
How To Add Cool Pure CSS3 Navigation Menu Bar For Blogger 1. Log in to blogger account 2. ...
SUMMARY

how to Add Cool Pure CSS3 Navigation Menu Bar for blogger blgspot on it,css3 effect and html menu navigation bar for website or blog attractive,blue,orange,grey colour menu bars

You Might Also Like:

We hope this article helped you to learn Add Cool Pure CSS3 Navigation Menu Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Cool Pure CSS3 Navigation Menu Bar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand