In this tutorial I am going to show you how to add a horizontal navbar or menu bar in blogger.Blogger has always lacked a navbar for easy and fast navigation.But no problem just with basic and simple knowledge of CSS and HTML you can also add a nav bar.Anyway in this tutorial I am providing a ready made CSS and HTML code.Just you need to do is to add it to your blog template by following a simple procedure.
Procedure to add a Navbar:
- Login to your blog account
- Dashboard appears
- Go to Layout – Edit Html
- Find this code – ]]></b:skin> (Use find function of your browser dude)
- Now add the below CSS code above ]]></b:skin>
#top {
clear: both;
height: 25px;
margin: auto;
padding: 7px 0 0 15px;
font-size: 15px;
background-color: red;
}
.nav1 {
float: left;
display: inline;
}
.nav1 li {
float: left;
display: inline;
}
.nav1 li a {
color: black;
font-weight: bold;
}
.nav1 li a:hover {
background-color: #eeeddf;
text-decoration: none;
}
.nav1 {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav1 li {
padding: 0;
margin: 0 20px 0 0;
display: inline;
line-height: 18px;
}
- After adding it.Copy the below code and paste it below ]]></b:skin>
- You can even add the below code by adding a new gadget
<div id='top'> <ul class='nav1'> <li><a href='http://www.website.com'>Link 1</a></li> <li><a href='http://www.website.com'>Link 2</a></li> <li><a href='http://www.website.com'>Link 3</a></li> <li><a href='http://www.website.com'>Link 4</a></li> <li><a href='http://www.website.com'>Link 5</a></li> </ul></div>
- Replace http://www.website.com with your URL
- Replace Link 1, Link 2, Link 3, Link 4, Link 5 with your desired anchors.
- That’s it. Save your template.
Related posts:
- How to display comment count in blogger
- How to add Read More hack to Blogger
- How to add three columns to footer
- How to hide the nav bar in blog
- How to display scripts in blogger posts with display boxes
Like this post? Post Comment, Download and Subscribe RSS