Tutorial on Making Horizontal Navigation

Recently, Kang Rohman has got many questions on how to make navigation button, like HOME,, FREE TEMPLATE, ELECTRONIC RUBRIC, and as seen in below illustration:

Actually, I have explained about this topic. Please read my post about “Vertical-1 menu”, ”Make Drop down Menu With CSS”. You might be interested in one of navigation menu I have ever posted.

Some bloggers can’t find the articles about making navigation button but some can find it and have succeeded to make navigation button. However, when they were trying to insert the link address into the buttons, they could not do that. It means that Kang Rohman tutorial is not clear yet. That’s why in this post, I would like to explain more clearly and hopefully that you will understand.

One thing you should know that designing a template is very complex and different each others. So when reading my tricks, you should work harder to match with the template you are using.

Before making navigation button, there are some things that you should prepare; they are the keywords that you will insert on the buttons, example Kang Rohman decides to insert HOME,, FREE TEMPLATE, ELECTRONIC RUBRIC to be inserted in navigation button that Kang Rohman uses.

The other preparation is the links that you will use. The links can be blog address or others web, links to the blog posting or links to your own web, For example; because Kang Rohman has some blogs, then I want some blog navigation are inserted by the log links, example;

http://rubrik-elektronik.blogspot.com

http://blogtemplate4u.com

How about if the links are the blog links not links for others blog? Don’t worry because we still can do that, however there is one lack of blogger compared with WordPress, that is not be able to make Static page. What does Static page mean? Static page means that the page that doesn’t belong to the lines of posting page, example; about me in WordPress.

In blogger, we can not do that, if you want a page to have a link, then you should post it. So, please post the page you want to be linked. How can we know a link of a post? It’s easy. Just click the title of a post or click the Read more menu if you use Read more, then look at your address bar, that’s the link address of a posting, finally copy and paste it into the notepad. Sample of posting address:

http://www.blogspottutorial.com/2008/11/google-pages-google-page-creator-is.html

illustration:

Beside the posting link address, you can also insert links for label or category. This function is very useful because when the navigation button is clicked; all posting will be shown in its category. Example, if a visitor clicks the navigation button, and then all posting in the category of free template will be opened:

http://www.blogspottutorial.com/search/label/free%20template

Ok, I consider that you have understood the first step. The next step is adding the code navigation into your template. Below is the navigation sample that Kang Rohman will explain, please see here.

Just remember that the template design between one templates with the others are different, so what I am going to explain might be different with your template. That’s why please use or make one blog as your experiment blog, so if you make mistakes or something wrong happens, it won’t damage your blog. Please choose the ordinary white minima template.

Well, Let’s start the experiment;

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. Drop your mouse down and 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='http://www.blogspottutorial.com/'>home</a></li>
   <li><a href='http://www.kangrohman.com/'>My Notes</a></li>
   <li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
   <li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </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. Finish.

 

Until this your experiment has done, however if you apply it in your template, you need to match a few things, such as; the width of the navigation, links, keywords and others. Some samples are as follow;

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

You have to change the width; 660px into the values which is suitable with your template; e.g. width: 990px.

 

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

This one is also the same; you need to change it with the value that is suitable with your template.

 

<li><a href='http://www.blogspottutorial.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>My Notes</a></li>
<li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
<li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>

You have to change the available links with the links you want. For this matter or problem, I have explained above. Examples http://www.blogspotutorial.com is changes into http://example.blogspot.com. And the keyword can be changed as you want; example “home” becomes “Front Page”.

Have a nice work!!

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Privacy guaranteed. We'll never share your info.

Related posts:

Save and Share!

Stumble Digg Tweet Save Reddit More