December 5, 2015

New Flat Tabbed Menu For Blogger / Blogspot

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.

Flat Tabbed Menu Simple

How to add Flat Tabbed Menu to blogger?



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.

Warning Icon  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> 


Was this article helpful?

Thanks! Your feedback helps us to improve blogsupporter.com
Keo Sopherth Professional Blogger

Offer a blogger blog, WordPress website development tutorials, and simple search engine optimisation tip with love.

- Advertisement -
Advertise Here (330 x 280)
- Advertisement -
Advertise Here (330 x 280)

1 Reply so far - Add your comment

  1. Hay, thanks for sharing me this blogger menu. I have done for my blog and it is look beautiful menu.
    See it here http://ocudance.blogspot.com

    Thanks Martine

    ReplyDelete

Your comment will be removed if it is a Spam or a comment with a link.