How To Add Horizontal menu bar for Blogger

How To Add Horizontal menu bar for Blogger

Step 1:  Sign in to your Blogger account.
Step 2:  From Blogger Dashboard,go to Layout.
Step 3:  Now click on "Add Gadget" link and find HTML/JavaScript element on the pop up window.
Step 4:  Paste below codes on your "HTML/JavaScript" element and make below changes on the given codes.

<style>
#hrnav05 {
list-style-type:none;
padding:0px;
margin:0px;
font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
font-size:18px;
}
#hrnav05 li {
display:inline;
float:left;
margin:0px;
}
#hrnav05 li a {
color:#EDEA3B;
padding:11px;
text-decoration:none;
text-transform:capitalize;
background:#B7B7B7;
border-style:solid;
border-color:transparent;
border-width:3px;
-moz-transition:all 250ms ease-out;
-webkit-transition:all 250ms ease-out;
-o-transition:all 250ms ease-out;
transition:all 250ms ease-out;
}
#hrnav05 li a:hover {
color:#B20000;
border-style:solid;
border-color:#B0B0B0;
box-shadow:inset 0px 0px 8px 10px #ccc;
-moz-transition:all .3s ease-in ;
-webkit-transition:all .3s ease-in ;
-o-transition:all .3s ease-in ;
transition:all .3s ease-in ;
}
</style>
<br/>
<div id="hrnav05">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Currency converter</a></li>
<li><a href="#">Our Group</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

- Replace red color #  with your target Urls such as your blog pages,specific posts or labels.
- Type the titles/names of your target Urls.

Step 5: Now Save your HTML/JavaScript.

..............................................................................................................................
More Information about customization
...............................................................................................................................

This navigation widget has been used hovering effects.You can change the default background color replacing the color name or hexadecimal number instead of #B7B7B7 .Also do same thing to the text color (color:#EDEA3B; ).You can change the both default and hovering effects.If you need any help,do comment in below.Happy blogging :)