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>
