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

Some of you have noticed that many blogs have AdSense Units or other ads and widgets in the header section of the blog, one of the most popular format being the AdSense 468x60 ad unit.

gadget inside blogger header

Unfortunately, we are not always able to add a widget inside the blogger header as a Blogspot user. The reason is that if we are using the Blogger default template, or any other customized template available on the internet, the header may be locked and have no option to Add a gadget inside it or just next to the blog title.

The reason why some bloggers are using AdSense ads or different widgets in a blog header is because of its maximum of number of impressions. For instance, when a visitor goes to a page, this will be the first place where he would give a first look and this makes it one of the hottest spots in our blog.
But how we can add something inside blogger header - be it a Adsense unit, a search bar, social sharing buttons, or a widget? By simply adding a section in the blog's header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

Important!
Before anything, we need to make a back-up of our Blogger template so that if we do make any major errors, we can easily restore the original working template to our blog.

To make a back-up, go to Template and on the right side - click on the "Backup/Restore" button.


Clicking on this button, will prompt you to save your existing template as an XML file to your hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later.


Resize blogger header


Step 1. Go to Blogger Dashboard, click on Template > Edit HTML

Step 2. Click anywhere inside the code area and open the search box by using the CTRL + F keys:

adsense, blogger tricks, blogger widgets

Step 3. Add this code inside the search box, then hit Enter to find it:
<b:section class='header' id='header' maxwidgets=
Note: If you can't find it, make sure that you have no space at the beginning of it.

Step 4. Replace class='header' with class='header header-left'.

Step 5. Now we need to find - CTRL + F - the following line of code:
<div class='header-cap-bottom cap-bottom'>
And just above this line, we should see two div tags:
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
Step 6. Paste the HTML code below just above these div tags:
<div style='clear:both;'/>

Now, let's go one step forward and add an extra gadget section within our Blogger header!

Add a new gadget/widget element to the Blogger Header


Step 7. Just above <div style='clear:both;'/> (step 6)... add this code:
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
Step 8. Now find this tag:

    </head>

Step 9. Just above the </head> tag, add this CSS styling:
<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>
Note: if your widget is wider than overall area that both elements should occupy, then you might need to add the margin-right property to move it more on the right - see this example:
<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px;
}
</style>
Step 10. Press the Save Template button to save the changes.

Step 11. Go to Layout of your blogger blog and you should see two gadgets on the header area.
You don't have to worry if the Add a Gadget element doesn't appear side by side as every blogger template is different. They might be slightly up or down or sometimes they might overlap each other. Just make sure that you drag the newly created widget just below the Header section.

widgets for blogger, blogger tricks

As I mentioned before, the header section could be one of the most valuable places in a blog. In that gadget/widget you can add anything like Adsense ads, search boxes, social sharing buttons, or you could, as well, sell that space for advertisement to boost your income.

122 comments:

  1. yeah..nice post thanks 4 sharing.. hope u also like my blog

    ReplyDelete
  2. when adding this i cant see my tittle even after add the other codes.
    help

    ReplyDelete
    Replies
    1. Have you changed the values in red from step 4?
      Please leave your link here to take a look. Thanks

      Delete
    2. To avoid messing up your template, i advise you to create a test blog and make the changes there.

      Delete
    3. Hello again. I've tested on my blog and you haven't changed the value from step 4... so please add your gadget first (your Adsense ad unit, image, or whatever) and then change the value from "header-left" (set the height to 185px and width to 650px or higher)

      PS. you have already the code from step 4 (the one you should change) so please skip to the other steps. Good luck

      Delete
  3. Can this be done with social media icons as well?

    ReplyDelete
    Replies
    1. You can add almost any widget you want. Just paste your widget's code in the HTML/JavaScript box after you've followed the steps above. If needed go back and resize your header for your widget to fit in

      Delete
  4. Hey, this worked really well but I'm struggling to get my social media icons to lay horizontal instead of vertical. I'm guessing it has something to do with the width/ height in step 4, but I've messed around with it for a while and no matter the numbers I use the icons stay the same.

    ReplyDelete
    Replies
    1. Hello Rachel,

      The left margin value of your social icons is too big.
      Find this line in your template:
      margin: 0px 0px 0px 585px;

      Change 585 with 85 . I hope it works

      Delete
    2. Okay, you are some kind of crazy genius! Thanks so much; it worked like a charm!

      Delete
  5. blog link in case you need it: http://rachellarow.blogspot.com/

    ReplyDelete
  6. in 6th step it shows an error:

    More than one section was found with id: header. Section IDs should be unique

    ReplyDelete
    Replies
    1. Hi Rahul, please verify if you have replaced the code from step 5 (see if you haven't something similar to it)

      Delete
    2. You can search (CTRL + F) for this snippet of code id='header' - it should look similar with that from step 5. Delete and replace it.

      Delete
  7. Thank you so much! This solved my problem... I used to be able to add gadgets and did so in the past year or so... all of a sudden this year I wanted to for the life of me I couldn't figure out what the problem was but this post helped solve the issue. Thank you so much for having this available. You're awesome!
    -Katya

    ReplyDelete
    Replies
    1. Glad this worked for you, Katya. Thanks for the feedback :)

      Delete
  8. No, That is not working. I have done all that but the widget is get added bellow the header and not side by side on the right. This looks so ugly as the total height of header is too much. Header plus widget height.

    ReplyDelete
  9. Thanks for tricky steps to implement, I hope grab some more blogger tricks.
    I like that.
    http://www.techtipsntricks.com/

    ReplyDelete
  10. Thnks For this Wonderful post :)

    ReplyDelete
  11. dude this did not work for my blog please help me.

    ReplyDelete
  12. Thanks so much for your help, I can't believe how easy you've made it all seem. I'm finding my social media header too tall, but can't find how to make it narrower. Any tips would be appreciated, thanks Mandy
    http://londonportraitphotographer.blogspot.co.uk/

    ReplyDelete
  13. How can i make short menu bar on blogger header image on right upper site?
    My site is Freeebook4u.net.

    Please help for that

    ReplyDelete
  14. I tried all my effort to apply but not successful my url is http://it-allin.blogspot.com/ kindly assist me
    thanks

    ReplyDelete
    Replies
    1. Sorry for the late reply. If you can't find all the codes - take each line in part, then search it. You should identify all the codes which look like the ones above. For example, at the step 7, search only for <div class='header-cap-bottom cap-bottom'> then seek for the rest of the code.

      If it's still not working, please send me a copy of your template at helplogger76@gmail.com. Thanks!

      Delete
  15. Any idea why I can put the widget up where the header widget is?

    ReplyDelete
  16. Can't, not can. Thanks!

    ReplyDelete
  17. Excellent tip. that's what i was looking 4 to add search bar in header.thanks a lottttt..

    ReplyDelete
  18. perfect thanks to you i hope to increase my adv profit

    ReplyDelete
  19. thanks you for your sharing bro.100% work

    ReplyDelete
  20. HI

    need your help..at step 5 I have a problem.

    Do not find..



    I find


    When I do replace...1/2 the header is gone..

    Await your response..

    ReplyDelete
  21. Very helpful tutorial, neat and nice.
    Keep sharing!

    ReplyDelete
  22. Hey, its not working, It is giving error. Please help.

    ReplyDelete
    Replies
    1. Please send your template file at helplogger76@gmail.com
      Thanks

      Delete
  23. can i add more than one widget in the header?

    ReplyDelete
    Replies
    1. I was able to do so by doing the following:

      In Section A, Step 6: Changing "maxwidgets" to how many widgets I needed, and changing "showaddelement" to yes.

      Then in Section B, Step 3: Changing "maxwidgets" to the same number as the step above.

      Hope this helps! It worked like a charm for me! :)

      Delete
  24. Thank You so much , this is veery helpful...

    ReplyDelete
  25. It worked for me.It made my blog (www.incomesideas.com) more professional... You are truly a genius.. :)

    ReplyDelete
  26. Awesome tutorial thanks for sharing this :)

    ReplyDelete
  27. really usefull post. i tried it and it works like a charm.

    ReplyDelete
  28. I'm unable to add the gadget in the header, I want to add media share buttons, and email subscription bar in the header..pl. help me out...
    http://www.pepperbowl.blogspot.com

    ReplyDelete
  29. Thanx a lot i m looking for it

    ReplyDelete
  30. Don't work for me ._.

    ReplyDelete
  31. nice post :D
    but need a little help...
    I want my blog logo image and the ad in one line...
    See here
    http://www.diigo.com/item/image/1haz1/cjqg

    PLEASE HELp

    ReplyDelete
  32. thanks for shearing this great article.....

    ReplyDelete
  33. Thank You! I just added a new header widget box for my site http://www.qubeinfolab.in

    ReplyDelete
  34. Worked beautifully, and easily. Just one question, how do you add two gadgets to the header? I would like to have a search box and social media icons below, and there is plenty of room. Thanks so much!

    ReplyDelete
  35. i want my that my own widget show on my web header left side then how can ajust there ? plz make a tut for this in this tut i did'nt found any image url?

    ReplyDelete
  36. Wooow!! A very insightful and informative post. It is so on point. Am adding you guys to bookmark rightaway. Keep it up

    ReplyDelete
  37. Hi

    This works better than others I've tried but unfortunately My logo come off the top no matter what size it is and the background disapears at the top when it should be black. www.therealmandem.blogspot.co.uk.

    Can you help please?

    Thanks

    ReplyDelete
  38. Guy, your information beat the rest. I have been trying to figure this out until I stumble upon this your post. It is working.

    Thanks a lot

    ReplyDelete
  39. Thank you. This worked great!

    ReplyDelete
  40. Thanks madam. You are very amazing. It's works! thanks again ;)

    ReplyDelete
  41. i dont have a header widget

    ReplyDelete
  42. Dude that 100% working Just follow the steps carefully that is working for me..
    if you get positoin error
    at
    .header-right {
    display:inline-block;
    float:right;
    width:400px;
    }
    just change the width as 550 it get exact position that you want.
    try it.

    ReplyDelete
  43. I couldn't get it to work. It gave me an extra gadget but they aren't side by side. When i add stuff it's under the header.

    ReplyDelete
  44. Hi...

    Such a nice post on how to add a widgets/gadgets in blogger's header.

    ReplyDelete
  45. Thank you so much for sharing...I get all my doubts about blogging cleared here... thanks again..

    ReplyDelete
  46. Nice post thanks 4 sharing..Sarkari Naukri

    ReplyDelete
  47. Its not working..Please help me!!!

    ReplyDelete
  48. Thanks For sharing this very easy to understand, I was searching for this whole time, thanks again.

    ReplyDelete
  49. My layout has changed so that the header gadget has moved to the side and there is room or another gadget box, however the gadget box isn't there so I'm still unable to add anything. Any thoughts on what I might be doing wrong? Thanks

    ReplyDelete
  50. Hi Admin, I have the tech blog and added visitor counter. But, I have seen it also count my visit also. So can you help me to refine those visits?

    Thanks !!

    Avinash Kumar
    Tech Tips

    ReplyDelete
  51. hello
    admin can you modify my blogger template?
    and thank you

    ReplyDelete
  52. Hi, I need some help! Do I have to add the icons to my header on photoshop first or just follow the instructions?

    ReplyDelete
  53. OKAY so i followed all the steps byt instead the add gadget being next to header it was under and I'm not being able to move it. Did I miss something?

    ReplyDelete
  54. Thanks for providing these info. you have fixed my problem.

    ReplyDelete
  55. Thank You! But I Want to put header in a custom box.
    windowstechnics

    ReplyDelete
  56. Okay, so I have VERY limited understanding of code but this morning when I changed the name of my title/header in blogger, the whole title has disappeared, any ideas what is up? It shows up in the mobile app window as visible but not on the blog, so frustrated.
    thiessen_robyn@surreyschools.ca

    ReplyDelete
  57. Hi, i have done what ever you have said but all my efforts are in vain , could you please help me out this my email id is vipuls1979@gmail.com , i could also send you my blog template if you want

    ReplyDelete
  58. Please help me when I want to change the html code, the code does not change:
    More than one widget was found with id: Image7. Widget IDs shoulds be single.

    ReplyDelete
  59. hey man u explained it very well.I did every step but couldn't see additional widget ?any ideas.

    ReplyDelete
  60. I tried but it is not working, the header will not move, it stays in the same place in the layout.

    ReplyDelete
  61. hey... i tried thrice but its not working on my template .. iwant some space beside my header for other links in right side ..can u help me
    http://rasmainexam.blogspot.in/
    i can send u my template ! thanks in advance

    ReplyDelete
  62. not working yar see
    http://testrasexam.blogspot.in/
    help me anyone

    ReplyDelete
  63. This still doesn't work.

    ReplyDelete
  64. Nice post an d trick
    I should to make done with this trik
    greatifull.. i have not ever see about this before

    ReplyDelete
  65. Thank you so much you just solved my problem

    ReplyDelete
  66. Every blog does not contain the same code inside, It can be found as #header then we can make changes in its width and height as well. Although, I didn't try your instruction, but It is my personal experience. Well, Thanks for sharing this, keep it up.

    Regards,
    Divya @smtutorial

    ReplyDelete
  67. cant find the codes in Step 5 and 7

    ReplyDelete
  68. Thanks for your awesome tutorial, I have managed to get most of it right, but I can not get the new widget to sit in the top right corner of my page..... www.jazskimogetsfit.com Could you please help? :)

    ReplyDelete
    Replies
    1. Please make sure that you dragged the widget just below/on the right side of your header, because it shows me that you added it on the tabs area (which is a little more further than the header section). After you have dragged it, click on the Save arrangement button on the right side.

      If it still appears below, you can add a style for it so that it would float more on the right:
      Go to Template > Edit HTML and add this code just above the ]]></b:skin> tag:
      #HTML3 {display: inline-block; float: right; margin-top: -100px;}
      Change the -100px value to make it move closer to the top of your page.

      I hope this helps. Thanks for visiting!

      Delete
    2. Thanks so so so much! That fixed it! Love your blog :)

      Delete
    3. You're welcome ^_^

      Delete
  69. I need your help, the last step change nothing at my layoutmenu .. :(
    http://www.fotos-hochladen.net/view/unbenannthfd65vxmiz.jpg
    here you can see what I mean
    Pleas help! Lori

    ReplyDelete
    Replies
    1. Hi Lori,

      The page elements might look a bit different from a layout to another depending on the other declarations used for each element. However I see that you managed to add an element on the right of your header. If you want to move it more to the top, add this above ]]></b:skin>

      #header-right {margin-top: -50px;}

      You can change the -50px value to make it aligned with your header.

      Delete
  70. I have just done this a couple of times and received no errors, however I have seen no change? Strange. Any advice? Thanks!!

    ReplyDelete
  71. Hi Alexis,

    Please check that you added the code from step 6. You can search for it by using CTRL + F. In case you can't find it, search for <div class='header-cap-bottom cap-bottom'> and add it above the two divs and <div style='clear:both;'/> (step 5).

    ReplyDelete
  72. Hi, thanks so much for this tutorial. I have added the search bar, but it is looking somewhat cluttered. How can I edit the code to get just the search box and Search button. Pls have a look http://nivedithatm.blogspot.in/

    ReplyDelete
  73. Hey, It's not working on my blog, I did it already how many times.... Can you help me? Please

    ReplyDelete
  74. Hi, I have followed the steps but it has added a gadget below my 'Blog Title' and above my 'Menu Bar'. I want it to be above my 'Blog Title', how can I edit it to adjust?
    http://isabellesminicloset.blogspot.co.uk/

    ReplyDelete
  75. hello,
    i have fallowed all the steps but this trick doesn't works..plzz help

    ReplyDelete
  76. really helpful post for beginner ..thanks.

    ReplyDelete
  77. Thanks a lot, it really worked on my blog:
    http://ngoandtaxconsultant.in/

    ReplyDelete
  78. very useful. thanks a lot.

    ReplyDelete
  79. Hi, I followed your instructions and was able to add an extra gadget area within my blog layout (I had used all the ones in my template). However, it went underneath my header instead of beside it. Not sure what to do to get it beside. Could you please help.
    Thanks
    Cindy
    www.diybeautify.com

    ReplyDelete
  80. So, funny thing. I just decided to try it out anyway and it put my gadget into my header! YAY! However, I'm not sure the alignment looks right. If you have a second to check it out and get back to me with any tips, I'd really appreciate it. Thanks :) :)
    Cindy @ DIYbeautify

    ReplyDelete
    Replies
    1. Hi Cindy,

      You could move it more to the left by adding this code below #header-right {:
      margin-right: 85px;

      Thanks for visiting! :)

      Delete
  81. After much searching, only your post manage to save my blog! Thank you loads!

    ReplyDelete
  82. Great post, very clear. For some reason it didn't work for me, though. Did everything up to, and including step 10, but there weren't two gadgets on the header area :(

    ReplyDelete
  83. I can't find this code in my template <div class='header-cap-bottom cap-bottom'>

    please help me thank you in advance

    ReplyDelete
  84. i have tried. not working. need help.

    i have sent you XML files. PLZ HELP.

    ReplyDelete
  85. hi admin, i am unable to do from step 4. Plse check my blog www.kareducation.in. i want to add 728*90 adsense code to right of the header.
    waiting for ur response

    ReplyDelete
    Replies
    1. Have you tried to replace class='header' with class='header header-left'? If you received an error afterwards, please make sure that you left blank spaces before and after class='header header-left'

      Delete
  86. Seriously . Awesome stuff. tried for actually 4 long hours and finally got it rite.. needs a bit a tweaking and testing so that you get it rite..! :)

    http://deskback.blogspot.in/

    ReplyDelete
  87. by mistake i removed the contributors gadget. can i get it back

    ReplyDelete
  88. Hi, I'm wondering how to get my header image to align left again? I've been looking everywhere and I can't seem to find the information I need. I changed it to center align and now I can't seem to change it back.

    Thanks.

    ReplyDelete
  89. it worked for me thanks a million check it out www.coolface.co.za

    ReplyDelete
  90. How to remove gadget/widget from my blog header? I want my blog logo occupy entire width of Header. Please help me....

    ReplyDelete
  91. Can't find the header-cap-bottom cap-bottom anywhere.

    ReplyDelete
    Replies
    1. Hi Anna,

      The code might look different if you are using a custom template. Try to add the code above the tag (instead of 'header-cap-bottom...') and specify the width to both .header-left and #header-right - for example:

      .header-left{
      width: 400px;
      }
      #header-right {
      width: 300px;
      }

      See if it works this way. Don't forget to make a backup before proceeding.

      Delete
  92. it says something like this
    Error parsing XML, line 931, column 3: The element type "header" must be terminated by the matching end-tag ""

    www.peacelessons.blogspot.com

    ReplyDelete
  93. thank you a lot....it works good for me
    http://matitumbi.blogspot.com/

    ReplyDelete
  94. I tried given steps but Add a Gadget option is showing below the header.. not with the header in my web blog www.ssc-cgl.in .. I am sending you HTML coding of my website over mail ... please check it & revert me... Thanks in advance for your kind help... May god bless you always.. :)

    ReplyDelete
  95. The new gadget is under the header, not beside it, help please

    ReplyDelete
  96. i am sure i followed the steps accordingly.. but doesn't seem to change, help

    ReplyDelete
  97. I'm visit of your site since more than 1 year and i really like your all posts and first of all your best template design love it. But now i have a problem if you please solve for me because i know you can...

    I'm showing you screenshot of my header or above fold and i want to place a adsense ads on right side which i showed in picture you can see but there is no option or place.

    Please see the attachment links/pictures you will understand.

    First Screenshot. http://prntscr.com/4nba2f
    Second Screenshot http://prntscr.com/4nbcfr

    ReplyDelete
  98. This is my blog: http://allbanglaboi.blogspot.com/ i can't move widget in blogger layout. when i drag and drop any widget in layout page its hind from page, then refresh the page it come in same position . what i will do now.
    sorry for bad english.

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!