Add Stylish Navigation Buttons With Subpages to Blogger Blog

What is Navigation?

Navigation means to go from one place to another. In the Language of Website or Blogs, navigation means to go from one page/post/website to another page/post/website. So, you can use a navigation menu on your website/blog and link some pages to that navigation menu so that your visitors can easily navigate over your website/blog. Usually, most important pages/posts of your website are added to the navigation menu. So, while adding navigation to your blog/website only add some of the most important and famous Pages/posts of your website/blog to the navigation menu.

Tips for Good Navigation Menu

Following are some tips to create a good and professional looking navigation menu for your blog / website so that more and more visitors may attract towards your blog / website
because, design of your blog / website is the major part of the audience’s attraction.

1.     Navigation menu should not be very long, so select some of the very important pages / post of your blog to add in the navigation menu.

2.     Navigation menu should contain only important and famous Topics of your website / blog. Don’t add any boring or less attractive points in your navigation menu.

How to add a navigation menu?

To add a beautiful and attractive navigation menu to your blogger blog, you have to follow these simple steps.

1.     Sign in to your Blogger account.

2.     Backup your template.

3.     Click on “Template” from the Left side of your Blogger Dashboard.

4.     Click on “Edit HTML” button on the next screen.

5.     Find for “</b:skin>”

6.     Paste the following code just before it.

#subnavbar {
background: #000000;
width: 960px;
height: 30px;
color: #000;
margin: 0px 10px 0px 10px;
padding: 0;
position: relative;
border-top:1px solid #960100;
height:35px;
}
#adbar {
background: #AC0100;
width: 960px;
height: 5px;
color: #FFF;
margin: 0px 10px 0px 10px;
padding-top: 7px;
position: relative;
border-bottom:1px solid #b62120;;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #b62120;
border-right:1px solid #960100;
height:35px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#subnav li a:hover, #subnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #AC0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #990201;
}
#subnav li li a:hover, #subnavli li a:active {
background: #BF0100;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

7.     After pasting the code, click on “Preview” button, if your template Loads normally, then click “Save Template”

8.     Now, go to “Layout” menu, just above “Template” and click on “add a gadget” and select “HTML/Javascript” from the list of available gadgets.

9.     Give any suitable title to this gadget, if necessary. And paste the following code inside its “content” field.

<div id="subnavbar">
<ul id="subnav">
<li>
<a href="URL of Homepage">Home</a>
</li>
<li>
<a href="URL of Page1">Title of Page1</a>
<ul>
<li><a href="URL of Subpage1">Title of Subpage1</a></li>
<li><a href="URL of Subpage2">Title of Subpage2</a></li>
<li><a href="URL of Subpage3">Title of Subpage3</a></li>
</ul>
</li>
<li><a href="URL of Page2">Title of Page2</a></li>
</ul>
</div>

10. Click on “Save”

11. Pick this Gadget that you added and place it where you want the navigation menu to appear. (Don’t put this gadget in sidebar, recommended place for navigation is at the TOP of your Blog.)

12. Click on “Save Arrangement” button on the Top Right corner.

That’s all.

Now just visit your blog and look! The navigation button is shining in your blog… Hurray!

Post your feedback and / or Questions below in comments.

Thanks.

Regards: WINFOPTC