How to Create Menu Bar in Blog

Introduction:
I have seen so many blogs which do not provide Menu bar on top of their blog. It becomes very difficult for the visitor to go through archives and look for each post until he founds what he want.
Every Blog require menu bar for user to jump to a post of a category.
So Today we are going create a simple, easy, and quick menu bar. It's includes css, and Html.

Steps:
1) Go to you blog Layout and add gadget
  HTML/JavaScript

2) give it a title: menubar

3) add below textin content

<ul id="menubar">
li><a href="http://computersciencematters.blogspot.in/">Home</a></li>

<li><a href="[Link / URL]">Tutorials</a>
<ul>
<li><a href="[Link / URL]">blogging</a></li>
</ul>
</li>

<li><a href="[Link / URL]">About</a></li>

<li><a href="[Link / URL]">Development</a></li>

<li><a href="[Link / URL]">Contact</a></li>

</ul>





<style>
#menubar {
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
}

#menubar li a:hover {
background: #4c5365;
color: #ffffff;
text-decoration: none;
}

#menubar li:last-child > a {
border-bottom: 0 none;
}

#menubar ul {
margin: 0;
padding: 0;
list-style: none;
}

#menubar ul li {
float: left;
}

#menubar ul li a {
float: left;
padding: 10px;
text-decoration: none;
}

#menubar li ul {
left: -999em;
position: absolute;
width: 160px;
z-index: 9999;
overflow: visible;
}

#menubar li ul a {
border: 0 none;
width: 140px;
border-bottom: 1px dotted #cccccc;
}

#menubar li:hover ul {
left: auto;
}

#menubar li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}

#menubar li li:hover ul {
visibility: visible;
}
</style>

 replace links http://computersciencematters.blogspot.in/ to your blog link and save it.

You are Done!!

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.