Add Matte Style CSS Navigation Menu Bar

0
Add Matte Style CSS Navigation Menu Bar for blogger

How To Add Matte Style CSS 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 menu starts here bloggersstand.blogspot.com */
   #menu12 {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 50px 0;
    padding: 0;
    list-style-type: none;
    background-color: #eee;
    font-size: 13px;
    height: 40px;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #ccc;
   }
   #menu12 li {
    float: left;
    margin: 0;  
   }
   #menu12 li a {
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 40px;
    color: #666;
   }
   #menu12 li a:hover, #menu li.active a {
    background-color: #f5f5f5;
    border-bottom: 2px solid #DDD;
    color: #999;
   }
   #menu12_wrapper ul {margin-left: 12px;}
   #menu12_wrapper {padding: 0 16px 0 0; background: url(http://4.bp.blogspot.com/-ok6LmoXq8WM/UGpmDJ3cC7I/AAAAAAAAEh8/XfiPpNZ7fF0/s1600/grey.png) no-repeat right;}
   #menu12_wrapper div {float: left; height: 44px; width: 12px; background: url(http://4.bp.blogspot.com/-ok6LmoXq8WM/UGpmDJ3cC7I/AAAAAAAAEh8/XfiPpNZ7fF0/s1600/grey.png) no-repeat left;}
 
   /* Black Menu */
   #menu12_wrapper.black ul {
    border-top: 2px solid #333;
    border-bottom: 2px solid #000;
    background: #333;}
   #menu12_wrapper.black a {color: #CCC;}
   #menu12_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
   #menu12_wrapper.black {background: url(http://2.bp.blogspot.com/-5_39zVf308E/UGpmBJALEjI/AAAAAAAAEhs/OjyhkilM9JM/s1600/black.png) no-repeat right;}
   #menu12_wrapper.black div {background: url(http://2.bp.blogspot.com/-5_39zVf308E/UGpmBJALEjI/AAAAAAAAEhs/OjyhkilM9JM/s1600/black.png) no-repeat left;}
 
   /* Blue Menu */
   #menu12_wrapper.blue ul {
    border-top: 2px solid #356AA0;
    border-bottom: 2px solid #204061;
    background: #356AA0;}
   #menu12_wrapper.blue a {color: #fff;}
   #menu12_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
   #menu12_wrapper.blue {background: url(http://1.bp.blogspot.com/-SjzM1x9XzaE/UGpmCFMwstI/AAAAAAAAEh0/eCqrEg7I5jM/s1600/blue.png) no-repeat right;}
   #menu12_wrapper.blue div {background: url(http://1.bp.blogspot.com/-SjzM1x9XzaE/UGpmCFMwstI/AAAAAAAAEh0/eCqrEg7I5jM/s1600/blue.png) no-repeat left;}
 
   /* Red Menu */
   #menu12_wrapper.red ul {
    border-top: 2px solid #660000;
    border-bottom: 2px solid #450000;
    background: #660000;}
   #menu12_wrapper.red a {color: #fff;}
   #menu12_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
   #menu12_wrapper.red {background: url(http://1.bp.blogspot.com/-bWwGkUN5jcc/UGpmFAnT77I/AAAAAAAAEiI/H1m1NJmsJXU/s1600/red.png) no-repeat right;}
   #menu12_wrapper.red div {background: url(http://1.bp.blogspot.com/-bWwGkUN5jcc/UGpmFAnT77I/AAAAAAAAEiI/H1m1NJmsJXU/s1600/red.png) no-repeat left;}
6. Go to blogger and click Layout
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
  <!-- Red Menu -->
  <div id="menu12_wrapper" class="red">
   <div class="left"></div>
   <ul id="menu12">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Add This</a></li>
   </ul>
  </div>
 *To change the style,Replace <div id="menu12_wrapper" class="red"> with below styles

Add Matte Style black CSS Navigation Menu Bar for blogger
<div id="menu12_wrapper" class="black">
Add Matte Style blue CSS Navigation Menu Bar for blogger
<div id="menu12_wrapper" class="blue">
Add Matte Style grey CSS Navigation Menu Bar for blogger
<div id="menu12_wrapper" class="grey">

 *Change All # With Your Links.

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

If you have any query regarding awesome matte style css Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.
how to Add Matte Style grey,red,blue,black,CSS Navigation Menu Bar for blogger blogspot,css navigation menu bar awesome matte style for website with hover effect
How To Add Matte Style CSS Navigation Menu Bar For Blogger 1. Log in to blogger account 2. No...
SUMMARY

how to Add Matte Style grey,red,blue,black,CSS Navigation Menu Bar for blogger blogspot,css navigation menu bar awesome matte style for website with hover effect

You Might Also Like:

We hope this article helped you to learn Add Matte Style CSS 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 Matte Style CSS 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