ATTRACTIVE MATTE CSS MENU BAR FOR BLOGGER

This is a nice CSS menu-bar with colors. There have 4 colors, for choose.

1. Go on your blog EDIT HTML option.

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/AVvXsEhdoJnG3uSZXh4oexT32ejXMdsw5g4KzvJHA2eXNYevZSNtsC2rccdOMFYIx-bsPyL8LMgx6dsqCkc_FqNhbFboKPOl0RdwTOlIod6PS8AOnTukw8YgqTMaGj-dhf8rXvjq_fRbPjQC0oM/s1600/grey.png) no-repeat right;}
   #menu12_wrapper div {float: left; height: 44px; width: 12px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoJnG3uSZXh4oexT32ejXMdsw5g4KzvJHA2eXNYevZSNtsC2rccdOMFYIx-bsPyL8LMgx6dsqCkc_FqNhbFboKPOl0RdwTOlIod6PS8AOnTukw8YgqTMaGj-dhf8rXvjq_fRbPjQC0oM/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/AVvXsEgfIBp9jq-cufxgkBQfczHeKiNy2CXjROUX5yD7Rxl1L2GjgOu3PMUhWSXXUIR_aSQrLkWROc7FrYt4JKXFJJBD2Bm3j8jDUgUV-zJtD9e0Y0vUPTTbY1dtY_tzJf-iyjHi9gTBnjkF7r4/s1600/black.png) no-repeat right;}
   #menu12_wrapper.black div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIBp9jq-cufxgkBQfczHeKiNy2CXjROUX5yD7Rxl1L2GjgOu3PMUhWSXXUIR_aSQrLkWROc7FrYt4JKXFJJBD2Bm3j8jDUgUV-zJtD9e0Y0vUPTTbY1dtY_tzJf-iyjHi9gTBnjkF7r4/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/AVvXsEgqjSeFAKSzeyfJOcbV2wLsQ44VZS4XpZqtOBsarjblpMRWtQVbyKE4GwtowzeVActwauGWJTE0QHxlPL6DEBWMGiaZIW0MdjashhPF6BCax59IO5WTfl-9hlgeg_QFCw2ooo3w9-EjoSE/s1600/blue.png) no-repeat right;}
   #menu12_wrapper.blue div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqjSeFAKSzeyfJOcbV2wLsQ44VZS4XpZqtOBsarjblpMRWtQVbyKE4GwtowzeVActwauGWJTE0QHxlPL6DEBWMGiaZIW0MdjashhPF6BCax59IO5WTfl-9hlgeg_QFCw2ooo3w9-EjoSE/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/AVvXsEjr9r_SM-N7zGIKUXazqg88COVdCWH7NvUKhfoxztar39vaEYF_10JmhfI1Eu2r84eSkVcUQGYN555rDtPGR0fCMzcYntQv62IhU28X_Nsx1u1FwnbMmP5AOhDJ_9FZN7NlfhZ2CM8weis/s1600/red.png) no-repeat right;}
   #menu12_wrapper.red div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9r_SM-N7zGIKUXazqg88COVdCWH7NvUKhfoxztar39vaEYF_10JmhfI1Eu2r84eSkVcUQGYN555rDtPGR0fCMzcYntQv62IhU28X_Nsx1u1FwnbMmP5AOhDJ_9FZN7NlfhZ2CM8weis/s1600/red.png) no-repeat left;}

4. Go to blogger Layout and add a HTML/Javascript gadget.

5. Paste below code in it.

 <!-- 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://kooltriks.blogspot.in">Add This</a></li>
   </ul>
  </div>

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