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

Some of you might have noticed this kind of placement of 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.

Unfortunately, we are not always able to add widget inside the Blogger header as a Blogspot user. If we are using the Blogger's default template, or any other customized template available on the internet, the header usually is locked and have no option to Add a gadget inside it or 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.

gadget inside blogger header


But how we can add a gadget 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, please make a backup of your current Blogger template so that anything goes wrong, you can easily restore the original working template.

To make a back-up, go to "Template" and look for the "Backup/Restore" button on the upper right side. 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" and hit the "Edit HTML" button.

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 HTML 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 blank space at the beginning of the line.

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

Step 5. Now we need to find 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'>
Note: if you have a custom Blogger template, you may not find the codes above and instead see the </b:section> tag right after the code from step 3. In this case, you need to add the codes from step 6 and 7 right after the </b:section> tag.

Step 6. Paste the HTML code below just ABOVE these two 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 code:
<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. Now go to "Layout" of your blogger blog and you should see two gadgets on the header area.

Don't 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 said 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.

115 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. 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
  6. 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
  7. 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
  8. Thanks for tricky steps to implement, I hope grab some more blogger tricks.
    I like that.
    http://www.techtipsntricks.com/

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

    ReplyDelete
  10. 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
  11. 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
  12. 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
  13. Any idea why I can put the widget up where the header widget is?

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

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

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

    ReplyDelete
  17. 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
  18. Very helpful tutorial, neat and nice.
    Keep sharing!

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

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

      Delete
  20. 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
  21. Thank You so much , this is veery helpful...

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

    ReplyDelete
  23. Awesome tutorial thanks for sharing this :)

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

    ReplyDelete
  25. 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
  26. 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
  27. thanks for shearing this great article.....

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

    ReplyDelete
  29. 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
  30. 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
  31. Wooow!! A very insightful and informative post. It is so on point. Am adding you guys to bookmark rightaway. Keep it up

    ReplyDelete
  32. 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
  33. 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
  34. Thanks madam. You are very amazing. It's works! thanks again ;)

    ReplyDelete
  35. 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
  36. 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
  37. Hi...

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

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

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

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

    ReplyDelete
  41. 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
  42. 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
  43. hello
    admin can you modify my blogger template?
    and thank you

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

    ReplyDelete
  45. 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
  46. Thanks for providing these info. you have fixed my problem.

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

    ReplyDelete
  48. 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
  49. 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
  50. 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
  51. hey man u explained it very well.I did every step but couldn't see additional widget ?any ideas.

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

    ReplyDelete
  53. 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
  54. not working yar see
    http://testrasexam.blogspot.in/
    help me anyone

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

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

    ReplyDelete
  57. 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
  58. 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
  59. 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
  60. I have just done this a couple of times and received no errors, however I have seen no change? Strange. Any advice? Thanks!!

    ReplyDelete
  61. 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
  62. Hey, It's not working on my blog, I did it already how many times.... Can you help me? Please

    ReplyDelete
  63. 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
  64. hello,
    i have fallowed all the steps but this trick doesn't works..plzz help

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

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

    ReplyDelete
  67. 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
  68. 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
  69. After much searching, only your post manage to save my blog! Thank you loads!

    ReplyDelete
  70. 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
  71. I can't find this code in my template <div class='header-cap-bottom cap-bottom'>

    please help me thank you in advance

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

    i have sent you XML files. PLZ HELP.

    ReplyDelete
  73. 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
  74. 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
  75. 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
  76. How to remove gadget/widget from my blog header? I want my blog logo occupy entire width of Header. Please help me....

    ReplyDelete
  77. 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
  78. 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
  79. thank you a lot....it works good for me
    http://matitumbi.blogspot.com/

    ReplyDelete
  80. 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
  81. The new gadget is under the header, not beside it, help please

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

    ReplyDelete
  83. 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
  84. 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