Add Widget/Gadget Inside Your Blogger Header

widget/gadget inside blogger header
Are you ready to make money online? If yes, I suggest you to place 468x60 unit ad banner in your blogger blog header and its the perfect place to place your ads and earn more money from your blog. But you can't add ads gadget in blogger header. Because there is no 'Add a Gadget' link. But we can easily solve this problem by adding a simple code into your blogger template.



demo icon png Wanna see a demo
You can see the below screenshot of placed ad banner in blogger header. After applying this trick your header will be also something look like this. see the screenshot below ▼

Add Widget/Gadget Inside Your Blogger Header



questionmark icon png Add Widget/Gadget Inside Blog's Header
You may please follow the instructions correctly to add this trick to your blogger blog.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML > Proceed
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

/* Header
----------------------------------------------- */

If you can't above code then find for below code ▼

#header

Replace above ▲ code with below code ▼

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

  • Line no 5 and 6: Change the pixels in highlighted lines with the image's height and width of your blogger header
  • Line no 7: To change position of the logo to right the change float: left; to float: right;

Use Ctrl+F again and find the below code ▼

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Preview your blogger template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets. So find the following code ▼

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

Or find below code if you can't find the above code (Only if you are not able to find above code)

<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

Now paste the below code ▼ just under above code ▲

<div style='clear:both;'/>
Save your template and you're done! If you have any doubt to clarify, feel free to ask via comments or contact form. Also please share it and wishing you a happy blogging:)