New Flat Tabbed Menu For Blogger / Blogspot

If talking about the Blogger or Blogspot menu design to a different drop down menu. I think this Flat Tabbed Menu is awesome and fit to all kind of free blog templates by using only HTML and navigation CSS code. It is a kind of responsive design menu which design for creating a blog spot and all free blogger templates. This menu code is able to customize background, hover color style and it is ready designed for the text shadow. It is mostly used for free professional blogger templates and magazine website template. Let's follow this below tutorial to design a responsive navigation menu and add it to your blogger template.

How to add Flat Tabbed Menu to blogger?

Live Demo

Step 1: Now visit blogger.com and Login to your account

Step 2: On dashboard you need to click on Template link then click on Edit HMTL button

Step 3: Click anywhere in HTML code area and press Ctrl + F or Command + F for Mac to search for  ]]></b:skin> tag.

Step 4: Now it is a step that you need to copy this below CSS code and just paste it.

/*—[Flat Tabbed Menu]——————————*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
    margin:0px;
    padding:0px;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu {
    width: auto;
    border-bottom: 3px solid #47c9af;
    font-family: Raleway, sans-serif;
    line-height: 1;
}
#cssmenu ul {
    background: #ffffff;
}
#cssmenu > ul > li {
    float: left;
    padding-left: 10px;
}
#cssmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}
#cssmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu.align-right > ul > li > a {
    margin-right: 0;
    margin-left: -4px;
}
#cssmenu > ul > li > a {
    z-index: 2;
    padding: 18px 25px 12px 25px;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    color: #444444;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    margin-right: -4px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
    -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover { color: #ffffff}
#cssmenu > ul > li > a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 120%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    content: "";
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: perspective(5px) rotateX(2deg);
    -webkit-transform-origin: bottom;
    -moz-transform: perspective(5px) rotateX(2deg);
    -moz-transform-origin: bottom;
    transform: perspective(5px) rotateX(2deg);
    transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
    background: #47c9af;
    text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    box-shadow:2px 0px 0px rgba(0,0,0,0.5);
    -webkit-text-shadow:2px 0px 0px rgba(0,0,0,0.5);
}

Step 5: Now press Ctrl + F or Command + F again to search for the </header> tag.

Step 6: Now after you fund the </header> tag, just copy this below HTML Code and paste below it.

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'>Home</a></li>
  <li><a href='#'>Projects</a></li>
  <li><a href='#'>Opportunities</a></li>
  <li><a href='#'>Products</a></li>
  <li><a href='#'>About us</a></li>
  <li><a href='#'>Contact</a></li>
</ul>
</div>

Step 7: Please review from the step 1-6 if every step is done, just click on Save Template button.

  Important: You can change menu name, rewrite to your own which show in orange.  Replace your personal URLs that you would like to link all of them [#]. You can add more menu by add this <li><a href='#'>Manu Name</a></li>