Make Horizontal menu

by nandu patel on January 2, 2009

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!!!

{ 5 comments… read them below or add one }

Sandra August 6, 2009 at 8:20 am

Thank you for this. Now I'm looking for a tutorial on how to create a submenu with the menu.

Can you help?

Anna L. August 10, 2009 at 5:26 am

Hi! thanks for the tip, very helpful, though the menu appears ABOVE my header image… what did I do wrong? Could you help? Thanks

Anna

patel August 12, 2009 at 12:16 pm

I love to help you. You may have paste that code some where as other wise it not possible. I have tried on my one theme. Please let me know URL.

TimeKill October 9, 2009 at 1:49 am

throw me a comment on my blog anna.i will let you know what you did wrong.happened to me aswell. i fixed it!
or add me
mzk_17@hotmail.com

kashif salman January 17, 2010 at 7:18 am

nice work, i works well on my page , i like it ]
keep it up
kashif salman´s last blog ..Complete CBT catalog of IT training videos – Including All Titles Released in 2008 My ComLuv Profile

Leave a Comment

CommentLuv Enabled


Previous post:

Next post:

Google Analytics Alternative