How To Create Horizontal Menu

How To Create Horizontal Menu, Tab Menu Horizontal, or Static Page in Blogger Blogspot.It was if the blog is no navigation menu on the header of the function can store the content that we feel is important for the click and the search will not feel seen, what if you think?

So like what the heck horizontal horizontal navigation menu or menu that? For more details see example image below:

In the language of his blog, a horizontal menu or horizontal menu tab is commonly referred to as a static page. With the presence of updates from blogger.com, now make static pages more easily.

We just need to log into blogger.com, Then select a post, click edit pages, then we make dech tuch stay static page or a horizontal menu. However, static pages are created in this way will generate a special page that is really a static page and there are no comments mailboxes. That is, static pages that we created not from the posting page. The difference, if we create a static menu page instead of posting page means the page is static or static page does not have a comment box.

I prefer to make a static page using two ways: static page without the comment box and static page with the comment box, the goal yes just because I think in a static page for the blog I may have that can be commented and there is no need to comment as the page Home, About, ...

If you want to create a static page or tab menu horizontal menu that most of his commentary box there too, probably want to follow the following steps:

1. Log into blogger.com
2. From the dashboard click the design, then select Edit HTML
3. Check Expand Widget Templates, then copy the following HTML code:
4. <div id="tabs6"> <li> <a href = "http://buptizuha.blogspot.com/"Title =" Home "> <span> Home </ span> </ a> </ li> <a href="#" title="About"> <span> About </ span> </ a > </ li> <a href="#" title="Contact"> <span> Contact </ span> </ a> </ li> <a href = "#" title = "Longer Link Text"> <span>Longer Link Text</ Span> </ a> </ li>
   <li> <a href = "#" title = "Link 5"> <span>Link 5</ Span> </ a> </ li>
   <li> <a href = "#" title = "Link 6"> <span>Link 6 </ span> </ a> </ li>
   <li> <a href = "#" title = "Link 7"> <span>Link 7</ Span> </ a> </ li>
   </ Ul> </ div>
   Note:
     => Replace the url: http://buptizuha.blogspot.com/ with the url of your blog homepage, and sign # in the url address you want
     => Replace the text: Longer Link Text, Link 5, Link 6, Link 7 with the title of the link that you input;
     
5.  Save the following code: <div id='content-wrapper'> or above code: <div id='main-wrapper'>
6.  Next copy the CSS code again the following:  
7. / *- Menu Tabs 6 --------------------------- * /
   # Tabs6 {
   font: bold 11px/1.5em Verdana;
   float: left;
   width: 100%;
   background: change-background;
   line-height: normal;
         }
   # Tabs6 ul {
   margin: 0;
   padding: 10px 10px 0 50px;
   list-style: none;
         }
   # Tabs6 li {
   display: inline;
   margin: 0;
   padding: 0;
         }
   # Tabs6 a {
   float: left;
   background: url ("images/tableft6.gif") no-repeat top left;
   margin: 0;
   padding: 0 0 0 4px;
   text-decoration: none;
         }
   # Tabs6 a span {
   float: left;
   display: block;
   background: url ("images/tabright6.gif") no-repeat top right;
   padding: 5px 15px 4px 6px;
   color: # FFF;
         }
   / * Commented backslash hack hides rule from IE5-Mac \ * /
   # Tabs6 a span {float: none;}
   / * End IE5-Mac hack * /
   # Tabs6 a: hover span {
   color: # FFF;
         }
   # Tabs6 a: hover {
   background-position: 0%-42px;
         }
   # Tabs6 a: hover span {
   background-position: 100%-42px;
         }
    
8. Save the above code: ]]></ B: skin>, Save the template and see the results.
9. HTML and CSS code shown above Code is the result of CSS Menu Generator from CSSPortal, you can also create a horizontal menu tab by taking the CSS and HTML code provided by CSSPortal in http://cssportal.com/. There are many layout options that you can choose as you wish.