AdSense And Other Gadgets Beside Your Blogger Header


adsense in header bloggerMany blogs now have AdSense Units or other ads and widgets in the header section of the blog.The most popular is the AdSense 468x60 unit beside the header text or image.In this post i will show you how you can also make the most of this space and have the option to place ads or any gadgets beside your header.

The default setting on Blogger is for the header to span the width of the blog and be used for the blog title only but this can easily be changed.The change used splits the header section into two separate sections and you are left with your actual blog title area on the left and you can add gadgets such as AdSense on the right.

To show the effect using a two section header on your blog i added it to a demo blog.You will see i added the popular 468x60 AdSense unit to the blogs header.

This was the layout before the change

And after the change you can see i have a new 'Add A Gadget' area :

You can see a demo of the result on this blog using the blogger minima template : Blogger Split Header

This post is in response to a comment by dil2010 on the post Add A Full Lenght Gadget Or AdSense Leaderboard Below Your Blog Header great question dil2010, if you want to suggest a post you can contact me or leave a comment.

To split your blogs header into two sections you need to replace two pieces of code in your blogs html.Although they are two small sections of code any time you replace code you have to be careful and take your time.

First make sure your template is backed up and follow the steps - You can do it !

Split Blogger Header Into Two Sections

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Blogger layout

edit html blogger

Step 2. Find the following section of code in your blogs Html :
(Click Ctrl and F for a search bar to find the code - More Info)

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;

Note : The easiest way to locate this section is to first find #header and the rest will be below.This section in your template might be slightly different.

Step 3. You must now replace that section with this code :

#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;

Note : If you feel comfortable you can change the width and height.

Step 4. Now find this section of code in your template :

<div id='header-wrapper'>
<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>

Note : Once again start by locating <div id="header-wrapper"> and you will see the rest below it.

The part in red will be the actual title of your blog.

Step 5. Replace that section of code with this code :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog-Title (Header)' type='Header'/>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Note : As shown in red above you must add your blogs title.Leave the part (Header) in blue as it is.

Step 6. Once you have made the changes you can save your template and you layout page will now show a two piece header for your AdSense or other gadgets.

If you do have any difficulty just drop a comment and i will be glad to help, if you are planning to use the new section for AdSense make sure to check out some other AdSense tips.

I also have a very Popular AdSense article on Infobarrel you should check out.

Have you changed your header ? Let us know !

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Great AdSense Tutorial Thanks.

  2. thanks for this! :D i was wordering

  3. Thanks, however, I'm using the Awesome template on my blog which doesn't have #header. Here's what is in the * Header section:

    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $( 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: 0 0 $(title.shadow.spread) #000000;

    .Header h1 a {
    color: $(header.text.color);

    .Header .description {
    font: $(description.font);
    color: $(description.text.color);

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;

    .header-inner .Header .titlewrapper {
    padding-top: $(;

  4. Never mind, I figured it out!

  5. I was looking exactly for this but I cannot find #header anywhere! Have things changed in the HTML for Blogger? Please help!

  6. @ Aaron - That is the start of the code for the Css that makes up the header and will be used on all Blogger templates.Did you use a search bar to look for it ?

  7. please help me out paul..there is no

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;

    in my template :( i am using simple template in blogger

  8. it doesn't work ... I have the same problem with Jon ... help us please !

  9. @ Song Lyrics - The problem is with some of the templates from the template designer.I spent 30 minutes working on a way to apply this to those templates but the code changes are very complex, for example you would have to remove an opening b:section tag and the closing tag which also has to be removed is over 50 lines below.I will try to find an easier way and either add it to this post or publish an updated post.


    1. hi Paul,
      Could you please post an update to this problem? even if the instructions are complicated, it's ok. I dont mind counting lines or anything:)
      Would really appreciate it!!

  10. Hi Paul

    Have you figured out how to amend this hack for the newer templates? I'm using the Travel template which has very different code.
    Thanks for your time.

  11. nice post, im newbie in blogger i find the header tag but not the same code please tell me how can i add banner in header ?

  12. Hello!
    LLLLOVE this blog. Very trusty, i never fail with this tuts ,but i dont know what the hell i did!!!
    I was grooming my blog but know i can center my adds!
    i have try with a lot of different methods with no result.
    Please help! I dont wanna be banned but here my url
    Hope somebody can give me a solution.
    i also have a backup of my blog my template if mant some reference....Thanks for read!!

  13. Is is okay not to tick the "expand widget box"?

  14. Step one was successful but step 2 was not successful
    my url is

  15. Very helpful. I am going to try this out again. Thank for sharing.

  16. I was Search this thing last week .....Really Such a easy step...grate job men

  17. Thanks for the great tutorial. I love this blog :)

  18. Thank you dude a very big heartful thanks........ i was trying since 3 hours ....


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us