You are here:Home » HTMLTricks » CSS Style Navigation Menu Bar for Blogger.

CSS Style Navigation Menu Bar for Blogger.

Before we have shared some simple and awesome navigation for blogs and websites and today i am going to share another simple ans awesome CSS style navigation menu bar for blogs/websites.

Must Visit Below Links;
Previous- Black Navigation Menu For Blogger. , Awesome Navigation Menu Bar Using CSS.
CSS Navigation

How To Add It To Your Blog:

Step1: Add CSS Code to Your Blog.
  • Sign in Your Blog.
  • Go to Template Section.
  • Go for Edit HTML.
  • Find ]]></b:skin> and copy below CSS code and paste above it.

CSS Code:

.nav {
 width: 100%;
 float: left;
 margin: 0px 0px 3em 0px;
 padding: 0px;
.nav li {
 float: left; 
.nav {
 width: 100%;
 float: left;
 margin: 0px 0px 3em 0px;
 list-style: none;
 background-color: #f2f2f2;
 border-bottom: 1px solid #ccc; 
 border-top: 1px solid #ccc; 
.nav li a {
 display: block;
 padding: 20px 30px;
 color: #069;
 border-right: 1px solid #ccc; 
.nav li a:hover {
 color: #c00;
 background-color: #cbf;
Step2: Add HTML Code to Your Blog.

  • Go to Layout.
  • Click on Add Gadget [Below Header].
  • Go to HTML/JavaScript.
  • Copy the HTML Code and Paste it.
  • Save the Widget.

HTML Code:

<div class='nav'>
 <li style='background-color:#f00;'>
        <a href='#'>Home</a></li>
 <li style='background-color:#0f0;'>
        <a href='#'>Services</a></li>
 <li style='background-color:#00f;'>
        <a href='#'>Archives</a></li>
 <li style='background-color:#ff0;'>
        <a href='#'>Contact Us</a></li>
 <li style='background-color:#0ff;'>
        <a href='#'>About Us</a></li>
 <li style='background-color:#fff;'>
        <a href='#'>Blog</a></li>
 <li style='background-color:#f0f;'>
        <a href='#'>SEO</a></li>
Note: Before Saving the Widget Change # with your URL and Its Name eg. Home, Services etc.