Tutorial Creating Horizontal Menu

Horizontal menu can use to put other your blog link or links that come from your own blog. Advantages to put other your blog link is you can promote your blog. For example if you have 3 blogs, and by placing the link on the horizontal menu, other your blog will be promoted, with this way surely visitors will easily to see it, because the links will appear at the top of the blog.

But you can also put a link from your own blog, for example: if you want to display the "about us" on the horizontal menu, you can create a post or page in advance about your blog, and then put the link in the horizontal menu.

Please note once again that the design templates from one with the other are very different, so it is is probable that what I explained is different from the template you use.

1. Go to Edit HTML.

2. Find code ]]></b:skin>

3. Copy and paste the following code right above the code ]]></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;
}

4. Go to the bottom, then look like this:

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

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

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.abc.com/'>home</a></li>
<li><a href='http://www.def.com/'>Cool WordPress Theme</a></li>
<li><a href='http://www.abc.com/2011/05/about.html'>About</a></li>
<li><a href='http://www.abc.com/2011/05/advertising-here.html'>Advertising Here </a></li>

</ul>
</div>
</div>

<div id='navright'>

<form action='http://YourBlogAddress.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 -->

6. then SAVE TEMPLATE.

You can change the width of horizontal menu by editing the following code.

/*  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;
}

and also :

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

change the value ​​according to the width of your template.

Popular Incoming search terms:

No related posts.