Wonderful-Tricks

Horizontal Navigation Top Menu Links For Blogger
Top Horizontal Navigation Menu Links For Blogger:-This is very important hack for bloggers as we need to create a top menu of links with our links to important pages making the navigation in your blog very easy for your readers.As i have also explained an easy way before to add top menu links to blogger but some would have not liked the styled of that navigational menu links.

How to add these top navigational links below blogger header:-

1. Login in to blogger dashboard

2. Go to 'Layout'

3. Click on Edit HTML.

4. And Search For </b:skin>

Now add these codes before it-

/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
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: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 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: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #666;
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;
}

Please edit the width of the above codes in red to adjust to the width of the navigation menu to adjust it to yours template width.You can change the color, height and design of above code also if you are capable of it.

Now Search for below codes-

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

And add the below codes after the above codes:-

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='/'>home</a></li>
<li><a href='http://wonderful-tricks.blogspot.com/search/label/Blogger%20Tricks'>Blogger Hacks</a></li>
<li><a href='http://wonderful-tricks.blogspot.com/search/label/Blogging'>Blogging</a></li>
<li><a href='http://wonderful-tricks.blogspot.com/search/label/Mobile%20Tricks'> Mobile Tricks</a></li>
<li><a href='http://wonderful-tricks.blogspot.com/search/label/Blogger%20Templates'>Blogger Templates</a></li>
</ul>
</div>
</div>
</div>

Thats It Now Preview It.If its working fine just save your template.

Change the links above in codes to yours.I hope you would like this navigation menu for sure.I will be back with one more great navigation link bar menu for sure ,uptil then enjoy this.