Make Horizontal menu

1 Please Log in into blogger with your ID.
2 Click Layout.
3 Click Edit HTML Tabs.
4. Find the following Code ]]></b:skin>
5. Copy paste the below code above ]]></b:skin>

/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

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

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

6. Find this code:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’test (Header)’ type=’Header’/>
</b:section>
</div>

7. Copy and paste the following code below code above:

<div id=’bg_nav’>

<div id=’navleft’>
<div id=’nav’>
<ul>
<li><a href=’YOUR-URL‘>home</a></li>
<li><a href=‘YOUR-URL‘>Free games</a></li>
<li><a href=’YOUR-URL‘>Blogging tutorial</a></li>
<li><a href=’#'>EDIT </a></li>
</ul>
</div>
</div>

<div id=’navright’>

<form action=’http://YourBlogName.blogspot.com/search’ id=’searchform’ method=’get’ name=’searchform’>
<input id=’s’ name=’q’ type=’text’ value=”/> <input id=’searchsubmit’ type=’submit’ value=’Go’/> </form>

</div>

</div><!– end bg_nav –>

8. Click SAVE TEMPLATE.
9. That’s it.

You can change green color text with you link with your lable post and many more…

Good Luck…..!

Related posts:

1. Installing the result code of CSS Menu Generator in Blogger
2. Make Multi Column on blogger
3. Display CSS codes and Scripts in Unique Style
4. Make Vertical Menu bar in blogger
5. How to Modify Comment Form…?

Share & Bookmark This Story!!!