Monday, November 16, 2009

How to add a Menu Navigation Bar with hyper links at the top in a blogger blog with new XML template?

A blog does have a blogger navigation bar at the top but lacks a MENU BAR with links to your own blog or any other link with your own choice links, as we see in many websites.  http://codezila.blogspot.com/


This helps in easy navigation across your blog/site. The reader will have a wide variety of choice and will stay on your site or blog for a longer time. This also helps in categorizing your blog posts according to their category or genre. http://codezila.blogspot.com/

Follow the following steps and its all done... very easy indeed.
 http://codezila.blogspot.com/

  1. Login to your blogger account and go to LAYOUT & then  PAGE ELEMENTS (default) 
  2. Now click on EDIT HTML  and  check " " 
  3. Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "Inner layout" to find "/* Inner layout */" inside ""
  4. Paste the following code after "/* Inner layout */" :
    5. /****** Top Navigation ******/
#topnav {width: 100%; 
   height: 20px;
   text-align: right;
   font-size: 0.7em;
   color: #999999;
   float: right; }
   
#topnav img {
   border: none; 
   padding: 5px; }


/****** Navigation ******/
#navigation {
   width: 100%;
   background: 
url(http://1.bp.blogspot.com/_3SdVQe5mP8U/Sssg9YVGb_I/AAAAAAAALfE/7QSG50RJYnM/s320/menu_button.JPG) repeat-x;
   height: 35px;
/*   border-top: ##58b2eb solid 1px; */
   margin-bottom: 2px;}
#navbar_link {
   height: 34px;
   float: left; }
#navigation #navbar_link ul {
   float: left;
   height:34px;
   width: 100%;
   list-style-type: none; }
#navigation #navbar_link ul li {
   display: inline; }
#navigation #navbar_link ul li a {
   padding: 0px 15px;
   color: #ffffff;
   text-decoration: none;
   line-height: 1.7em;
   float: left;
   border-right: 2px solid #0c5684;
   text-decoration: none;
   font-size: 1em;
   font-weight: bold;
  }

#navigation #navbar_link a:hover { 
   text-decoration: none; 
   border-right: 1px solid #0c5684;
   color: #FFFFFF;
background: #ddd 
url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssf0YtHOyI/AAAAAAAALe8/H9Gh5b9Dn90/s320/menu_button.JPG) repeat-x;
}
   
.1ST a {
background:  url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssel0xFZRI/AAAAAAAALe0/Mm9U_ETVHeQ/s320/menu_button.JPG) repeat-x; 
}
  5. Now Uncheck " " at the top right.
  6. Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "header-wrapper" to find
    div id="header-wrapper"
  7. Now before this header div ends , paste the following code after /b:section



    <!--navigation links-->
<div id='navigation'>
      <div id='navbar_link'>
        <ul>
           <li class='1ST'><a expr:href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='url1'>Link Title</a></li>
           <li><a href='url2'>Link title2</a></li>
           <li><a href='url3'>link title 3</a></li>

<!-- add as many links as you want -->

        </ul>
      </div><!-- end of navbar_link -->
      </div><!-- end of navbar -->


  8. Replace the url1/url2/... with your own links and Link Title1/2/3.... with your link title.
  9. Save the Template. Its All Done. You can see the green navigation bar as shown above.
  10. Having problem with the code? feel free to ask through below comment area.
  11. enjoy a new look to your blog or site.
Labels: , , , ,