Skip to main content

How To Add A Gadget / Widget Inside Blogger Header Section

Many websites or blogs display AdSense add or other add on their header section. It helps you to use that particular free space of the header section. Many websites have most popular AdSense add (460 x 60) format in this space. Unfortunately, blogger's default template doesn't have two Add a Gadget in the header section. But it has only in the footer section. If you want to display AdSense ad, Search box or social media sharing button then you need to customize your default blogger template in such a way that you will divide the header section to get two Add a Gadget in your header. Read also How to delete locked widget

This is the hottest area of your blog where you need to concentrate a lot. If you wish you can sell your space also. It brings you some extra cash in your pocket.

Important Note:- Before doing customization of your blogger's default template, take Back-up of your template and your blog's data so that if you make any major mistake, you can easily restore your original template as well as your blog's data.

 How To Download Blogger Template

 How To Download Blogger Data

In the below Layout image, there is no Add a Gadget option inside header section. I will show you how to add a Gadget in the header section of my template. To add an extra Gadget or widget to header section of your blogger template you need to do the following steps to customize your blogger template.

Step 1. Login to your blogger account
Step 2. Click Template
Step 3. Click Edit HTML
Step 4. Click anywhere inside the code area
Step 5. Press Ctrl + F on your keyboard to get search box inside the code area

Step 6. Type <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  inside search box and press Enter on your keyboard

Step 7. Now you need to replace  class='header'  with  class='header header-left'.
Step 8. Again type <div class='header-cap-bottom cap-bottom'> in the search box and press Enter on the keyboard
Step 9. Above <div class='header-cap-bottom cap-bottom'> line you will see two div tags

<div class='header-cap-bottom cap-bottom'>

Now you need to enter the below codes

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/> 

just above these two </div> tags. See the below image for your reference.
Step 10. Now you need to find </head> tag. Again type </head> in the search box and press Enter on your keyboard
Step 11. Above </head> tag you need to enter the below CSS code

Read also How to remove space between blogger gadgets

display: inline-block;
float: left;
#header-right {

Step 12. Now you need to click Save template to save the changes.
Step 13. Now click Layout. There you will see gadget on the header section.

Thanks for reading the post. Let me know whether you have faced problem in deleting any locked gadget. Also let others to experience this feature by sharing this post on your social networks.


  1. Hello, i think that i noticed you visited my weblog so i came to go back the favor?I'm attempting to find issues to improve my site!I guess its good enough to use some of your ideas!!

  2. 2nd code can't search in blog??? please give me any answer


Post a Comment