Add Widget/Gadget Inside Blogger's Header - Helper Blogger

Blogger Widgets | Templates | Tutorials


Sunday, 22 April 2012

Add Widget/Gadget Inside Blogger's Header

You may have seen many blogs that have installed Adsense or any other widget/gadget inside their blog's header.Most of them use the 468x60 unit ad banner in their banner and it is a perfect place to place your ads and earn more money from your blog.But what is you can't see the "Add a Gadget" Link" in your blog's template layout ? Here I have a solution for this problem we will fix this with adding some codes inside your template.Now let's do the work.

How To Add Widget Widget/Gadget Inside Blog's Header?

  • Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
  • As always download a copy of your template before making any changes.
  • Now find for below code in your template

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

  • If you can't above code then find for below code :


  • Now replace above code with below piece code

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

  • If you want to change height and width of the logo then edit the lines in blue from above code.
  • To change position of the logo to right the change float: left; to float: right;

  • Now find for below code in your template

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

Note - Above code will little different in your template as coding of each is differ.The best way to find above code is search for only half piece code i.e. till id='header'.

  • And replace above code with below code

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

  • Now "Preview" your 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:

  • Find the following code:

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

  • If you can't find above code then only find for below piece of code in your template.

<b:include name='description'/>

  • And paste below code just below of above code

<div style='clear:both;'/>

Now save your template.

Go to your Layout page you will watch "Add a Gadget" link inside your header.



  1. It didn't work.......All steps done successfully, but doesn't show add a url is Pls, do something.....

  2. not working dude...please help me....i already follow your is my blog..

  3. Yes Brother Same Problem here...??? Help Us

  4. not working bro...

  5. @All - I have received many comments about this tutorial.I have checked my code with my demo blog and it is working but the main problem is that coding of every blog is different thats why it is not working.I will update or post a new tutorial soon.

    Sorry about that :(

  6. I found the ending a bit confusing to understand. The code is probably correct as you said, but not clearly explained in the post. Could you please check it? This is a great feature to have. Thx.

  7. This comment has been removed by the author.

  8. This is working, guys >>

  9. This really works, thanks a lot!

  10. Admin you are darling! It worked for my blog

    Thank you for sharing.


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM