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 " Expand Widget Templates" 
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 */" :

/****** 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 " Expand Widget Templates" 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.

How to add adsense ads just after the post title and after Post Ends in blogs.

It is always beneficial to show the ads just after the post title before the real content starts. But by default the ads are shown either in the sidebar or after the comment link at the bottom of the post. So many a time your visitors did not even give a look to the ads which is not desirable.

So what to do to make the adsense ads come just after the post Title and at the post bottom before the Comments or reaction buttons or anything else.

Follow the following steps and its all done... very easy indeed.

1. Login to your blogger account and go to LAYOUT >> PAGE ELEMENTS (default) 
2. Click on EDIT in BLOG POSTS (a pop-up window "configure blog posts" will open)
3. Check the radio button  "SHOW ADS BETWEEN POSTS" at the last of "Post Page Option" in the pop-up.
4. Scroll down and click on Ok (you can edit the colour of the ad displayed, its better to match the ad colour to your blog colour especially ad background and border must be same as blog background colour)
5. Save the template by clicking on the BLUE button at the top right.
6. Now click on EDIT HTML >> check " Expand Widget Templates" 
7. Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "adcode" to find <adcode> just after the comment section.
8. Then add "!" before adcode like <!--adcode--> (this makes the defalut adcode as a comment for the browser and it will ignore it while interpreting the codes)
9. Then Find  "<data:post.body/>" using "Ctrl+F".
10. After and Before "<data:post.body/>" paste this code:

<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if> 

11. Save the Template. Its All Done. Now after every each post title your ad will be shown and at the bottom also. To edit the type of ad size and colour see point 4. But its better to use a square size ad format.
12. Best of Luck. Happy earning.

NOTE: Always Save your template before editing your HTML codes.