How To Add Navigation Bar In Blogger Blog

Posted by Vikram Rajpurohit 0 comments
 How To Add Navigation Bar In Blogger Blog with on hover effect.Adding a beautiful horizontal navigation menu bar in the top header part of your blog will let your readers know about different categories you write about on your blog.It will not only give a professional look to your website abut also make your readers navigate through your blog at ease.Lets create a stylish navigation bar for your blog:)


how to add navigation bar in blogger blog

Add Navigation Menu Bar In Blogger Blog

1.Go to Blogger Dashboard > Template > Edit HTML
2.Search (Ctrl+F) for the line  ]]></b:skin> .
3.Now Copy the below code and paste it before the red highlighted line.

/* http://genuinecontent.blogspot.com*/
.navcontainer {
-moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;;
border-radius:8px 8px 8px 8px;
background: #E64E00;
width: 890px; height: 40px; font-size: 14px;margin: 0px auto; padding: 0px 10px; padding-top:0px;padding-left:100px}
}
#nav {
list-style-type:none;
margin:0;
padding-top:0;
height: 36px;
overflow: hidden;
float:left;
}
#nav ul {
float:left;
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
list-style-type:none;
margin:0;
padding-right: 2px;
padding-top: 4px;
}
#nav ul li {
list-style-type:none;
margin:0;
padding:0;
}
#nav li a:link, #nav li a:visited {
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
color: #fff;
text-decoration: none;
text-transform: capitalize;
font:15px 'Open Sans';
letter-spacing:-0.1px;
font-weight: normal;
display: block;
padding: 4px 14px;          
}
#nav li a:hover, #nav li a:active {
background:#5A5858;
color: #fff;
text-decoration:none;
}
#nav  li.current-cat a {
background:#5A5858;
color: #fff;
text-decoration:none;}

 Customize Navigation Menu Bar In Blogger Blog

You can easily customize your navigation bar as per your requirements.You can change the look of this navigation bar by modifying the below code( highlighted in blue in the above piece of code)

border-radius:8px 8px 8px 8px; //gives you rounded corners for your navigation bar,If you don't want rounded corners then you can replace 8 with 0.

8px(top right corner)    8px(top left corner)    8px (bottom right corner)      8px(bottom left corner)

background: #E64E00; //Change the colour here by giving your desired color code.

width: 890px; height: 40px; font-size: 14px; //customize height,width and font of the navigation bar.

4.Now search the below code in the EDIT HTML of your blog.

<div id='header-wrapper'>
<div id='header'>
<b:section class='header' id='blog-title' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=' The Genuine Blogging (Header)' type='Header'>


 5.Add the below code just after the above red highlighted header code.

<div class='navcontainer'>
<ul id='nav'>                       
        <li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='Category link1  '>Category 1</a></li>
        <li><a href='Category link2  '>Category 2</a></li>    
        <li><a href='Category link3  '>Category 3</a></li>    
        <li><a href='Category link4  '>Category 4</a></li>
 </ul>
</div>

6.Replace the Category links and category titles with your category/label links and titles.

7.Now save template and your are done.