Ramadhan Wallpaper: November 2009

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/

Now click on EDIT HTML and check " Expand Widget Templates"

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "Inner layout" to find "/* Inner layout */" inside ""

Paste the following code after "/* Inner layout */" :

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

Now Uncheck " Expand Widget Templates" at the top right.

Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "header-wrapper" to find

div id="header-wrapper"

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 -->