Attractive Matte CSS Menu Menu Bar For Blogger

This is a nice CSS menu-bar with colors. There have 4 colors, for choose.Im included a demo for this menu bar, you can check it from demo link.You can check my earlier menu bar post by clicking here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

2. Find this tag by using Ctrl+F ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here */
   #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-shfWH2Usu34YGWr-zVP0YTSNerwb2QjM6fgMQ2C8HsQC7kmcqvXpizceWmHo4-20mFNZ-TMD8St0SDtI5MJHtc8MtNg87J6CNzjKUBO9-RIcTUXFRRLihMre0CAjz-HNMkO0Rbisyp4/s1600/grey.png) no-repeat right;}
   #menu12_wrapper div {float: left; height: 44px; width: 12px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-shfWH2Usu34YGWr-zVP0YTSNerwb2QjM6fgMQ2C8HsQC7kmcqvXpizceWmHo4-20mFNZ-TMD8St0SDtI5MJHtc8MtNg87J6CNzjKUBO9-RIcTUXFRRLihMre0CAjz-HNMkO0Rbisyp4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihcol66Veh1m0aeEFs3vwhJfRglyCPmVV0H-9ruoGS0UQTGkAiuWawlthFLqkdwPt8M0-ebAXV1qDP4wKf4TGi9Jb48lr6NQzGbdclnPRfmPxAFENXA4RPYMjMxUFN_4l4lXWeQrOqGc/s1600/black.png) no-repeat right;}
   #menu12_wrapper.black div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihcol66Veh1m0aeEFs3vwhJfRglyCPmVV0H-9ruoGS0UQTGkAiuWawlthFLqkdwPt8M0-ebAXV1qDP4wKf4TGi9Jb48lr6NQzGbdclnPRfmPxAFENXA4RPYMjMxUFN_4l4lXWeQrOqGc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8UHB4SNo88GypOSlkyJQU7c92G5dus7KebemwrSBkmI0PtnQTrcHx-CMwsRtaTUHMBxAY4PdDcln4dDoLjECXVTdBtTJLoIb45dzsq9YpF9EU7SgMr2SWlSDSAKwPyjGcoOdNGvCfCA/s1600/blue.png) no-repeat right;}
   #menu12_wrapper.blue div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8UHB4SNo88GypOSlkyJQU7c92G5dus7KebemwrSBkmI0PtnQTrcHx-CMwsRtaTUHMBxAY4PdDcln4dDoLjECXVTdBtTJLoIb45dzsq9YpF9EU7SgMr2SWlSDSAKwPyjGcoOdNGvCfCA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg33PsRhxkGwqSVms8qw6hjOOm6Tx2NsdkmPo-XHIEgs7sijXs3uVUEzSqEoAclh0_oaraB40mf9jIORYj79bsLL96j3GEdbwA_jp459kmBAJgnp0VNw3qKoHSdhmujmEPwnHgD97rBF_s/s1600/red.png) no-repeat right;}
   #menu12_wrapper.red div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg33PsRhxkGwqSVms8qw6hjOOm6Tx2NsdkmPo-XHIEgs7sijXs3uVUEzSqEoAclh0_oaraB40mf9jIORYj79bsLL96j3GEdbwA_jp459kmBAJgnp0VNw3qKoHSdhmujmEPwnHgD97rBF_s/s1600/red.png) no-repeat left;}

4. Go to blogger and click Layout

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

 <!-- Grey Menu -->
  <div id="menu12_wrapper" class="grey">
   <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="http://www.bloggertrix.com/">Add This</a></li>
   </ul>
  </div>

6. To change the style, you have to replace <div id="menu12_wrapper" class="grey"> with below styles