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…..!
Thank you for this. Now I'm looking for a tutorial on how to create a submenu with the menu.
Can you help?
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
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.
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
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
thanks for this tuts, very helpful
you have a nice blog here, thanks for the tips. it work well for my blogspot. you can go check it out!
ceejay´s last blog ..New Paid to post on forum launched!!! get paid 1ocents to refer
thanks nice work
shahid mahmood´s last blog ..Beyond Google Adsense: Monetizing Your Website