How to add a gadget/widget inside your Blogger Blog header ~

How to add a gadget/widget inside your Blogger Blog header

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468×60 ad unit – see in the screenshot below:

But how we can add something inside blogger header – be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

Step 1: Go to Blogger

>> Design >> Edit HTML and backup your template

Step 2: Check the “Expand widget templates” box

Step 3: Find (CTRL + F) this piece of code:

/* Header

———————————————– */

Step 4: Replace it with this code:

/* Header

———————————————– */


display: inline-block;

height: px;

width: px;

float: left;


.header-right {




Change the pixels in red with the image’s height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

Step 6: Replace it with:

Now “Preview” your template, you will find that the background color of Blogger’s header is not visible or it’s missing.

Add a Comment

Your email address will not be published. Required fields are marked *

error: Content is protected !!