How to add banners, adsense or search box to blogger header

If you want to monetize your blog or website, then you have to create some ad-spaces on your blog to display advertisements. If you are using free blogging platforms like blogger, then you have options to add banners, adsense or search box on sidebars and footers of your blog, not the blogger header. To display ads on sidebars and footers, you just need to add html/javascript type gadget and embed the html code of advertisement. By default blogger templates do not provide any place holder on the top or beside blogger header to display banners, adsense ads or search box. But this is the best place to display your advertisements to get maximum visibility from your blog readers among all place holders. 
Here you will see how to create a place holder in blogger header so that you can add banners, adsense or search box. You can create place holders by two ways, either use custom template which already has such placeholder or customize blogger template to create place beside/above header.
There are many websites like btemplates.com, hongkiat.com where you can get free custom templates. But same thing you can achieve in your existing template also, just by adding few line codes. It will take hardly 20-30 mins to complete. So lets see how to add banners, adsense or search box to blogger header. 

Step 1: Login into blogger account and click on your blog to go to blogger dashboard

Step 2: Go to Template and click on ‘Edit HTML’ button to add few lines code into blogger template

Step 3: Before editing the code, always take a backup of template. If you want to go back to your old template, you can restore it from backup copy of the template. Read it here, how to backup blogger template.

Step 4: Search for "<b:section class='header' id='header' maxwidgets inside the code 

      - If you don't find it, try with part of above search string and locate the line
Step 5: Replace class='header' with class='header header-left'
      - It should looks like "<b:section class='header header-left' id='header' maxwidgets
Step 6: Now search for the string "<div class='header-cap-bottom cap-bottom'> and add two 'div' tags just above this line. It should look like below
                                 </div>
                                     </div>
                                     <div class='header-cap-bottom cap-bottom'>

Step 7: Add "<div style='clear:both;'/> just above these two div tags
                               </b:section>
                                   <div style='clear:both;'/>
                                   </div>
                                       </div>
                                       <div class='header-cap-bottom cap-bottom'>
                                       <div class='cap-left'/>

                                       <div class='cap-right'/>

Step 8: Just above the line "<div style='clear:both;'/>, add below code
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'>

Step 9: Search for "</Head> and just above this line, add below css script
                          <style>

                             .header-left{

                             display: inline-block;

                             float: left;

                             }

                            .header-right {

                            display:inline-block;

                            float:right;

                            }

                        </style>

To give more style, you could add few more css scripts like margin-right, margin-left as per your requirement.

Now save the template and goto blogger layout to see widget has been added or not. If you don't see it, press F5 to refresh the page and check it. Before saving the template, you can see the preview of your changes by clicking on ‘Preview template’ option. Also test your changes in multiple browsers because it may differ from one browser to another.

After that also, if you don't see the 'Add a Widget' box, then do below changes. 
- Search for "<b:section class='header' id='header' maxwidgets" and change the parameter value of maxwidget to any number, more than 1.

Maxwidgets = number of widget you want to display above blog title + 1 (1 is for blog/website header)

Now save the template and verify again.

Installing the widget:

Now it's time to add widget to display banners or adsense code or any other widget beside blogger header.

Step 1: Goto blogger dashboard

Step 2: Click on 'Add a Gadget' link, just below header and add your widget. In blogger layout, your new gadget may come under Header but on your blog or website, it will come beside header only. So don't worry, just add the widget.

Step 3: Click on 'Save Arrangement' to save the layout and verify your blog 

That’s all to add banners, adsense or search box to blogger header.  If you face any challenges, please leave your comment here. To get more updates on recent activities, follow 'BlogTlog' on Facebook / Twitter / LinkedIn or join our website as followers.