Add Google Adsense to Blogger Header (Above the Title)

In some of the previous tutorials, such as How to Add Social Media Buttons beside AdSense ads & AdSense inside Blogger Header, you've seen a few tricks for AdSense ads placement that might help you to increase your AdSense earnings. This tutorial will show you how to add Google AdSense above the header, for instance, just above the title of your Blogger blog. This can be done by adjusting the template to give you the option of adding more than one widget to the header area.

Add a new element to Blogger header

Step 1. From your Blogger Dashboard, go to "Template" and click on the "Edit HTML" button (it is recommended to make a backup first - click on the Backup/Restore button on the right side)


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open Blogger' search box:

Step 3. Paste or type the following code inside the search box and hit Enter to find it:
<div id='header-wrapper'>
Note: if you can't find that one, try to find this one instead:
<div class='region-inner header-inner'>
Step 4. Just below one of these lines, you should see this line:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Step 5. Replace the values in red like in this example:
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Step 6. Click on the "Save Template" button to save the changes.

Adding the AdSense ad unit above the Blogger header

Step 7. Go to "Layout" - on the right side, you should see a new section that will allow you to add a gadget in the header area

page elements, blogger, add a gadget

Step 8. Click on the "Add a Gadget" link and select the "Google Adsense" gadget.

adsense gadget, blogger widgets

If you want to add the ad script from your AdSense account, choose the HTML/JavaScript gadget and paste the script inside the empty box, then click on the "Save" button.

html javascript gadget, blogger gadgets

If you don't know how to create an AdSense ad, please read this tutorial: How to Add Adsense ads on Blogger

Choose the type of ad unit you want. In my example, I added a new Adsense 728x15 ad link unit that I thought would look good above the blog title. Color blending is usually done automatically by Blogger according to the color schema of your template but you can choose any other colors.

Step 9. Click on the "Save arrangement" button on the right side.

blogger save arrangement

Now view your blog to see your new Google AdSense unit. If all is going well, your new AdSense ad unit should appear above your blog's title or logo:

adsense ads above header

Note: it may take a while for your ads to show if you created an ad unit on your AdSense account

That's it! So this is how you can add ads above the title. As I said, adding Google AdSense to Blogger Header is a very good Adsense placement that might help you to increase the CTR of your blog.

29 comments:

  1. How To Add Sliding Gadget Of Post Images As Shown In YOue Home Page

    ReplyDelete
    Replies
    1. Hi Komal,

      Check out this new tutorial on how you can add it:
      Popular Posts Gallery above Blogger posts

      Good luck!

      Delete
  2. i face problem with css ,, i put the ads but there is 30px padding on top and bottom,, help me to remove tht padding,, where do i find tht css?

    ReplyDelete
    Replies
    1. Add the following code just above ]]></b:skin>

      .header-inner {
      margin-top:-20px;
      margin-bottom:-20px; }

      Increase/decrease "-20" value if needed. I hope it works... and sorry for the late reply

      Delete
  3. How about adding adsense below the header as you did?

    ReplyDelete
    Replies
    1. I'll post a tutorial these days about this. Keep visiting

      Delete
  4. how to center Google Adsense ?
    E.g: i wanna center the Ad at the bottom of my site: http://www.k3lvinmitnick.info/p/payment-proof_21.html
    How to ?

    ReplyDelete
  5. I advice do not use adsense at all...
    Google adsense is famous fraudster and thief, they wait till accumulate some good money in account and block account. You cannot discuss anything coz robot answer you for apelation, you cannot do anything.

    In my case I have accumulated about USD $2000 and google have stopped account. I never made anything bad, all actions was according to agreement, I suppouse that our competitor made something and account was stopped. But google dont want to discuss it and do not want pay my money accumulated for about 2 years. So googl is thief !

    ReplyDelete
  6. sir i m planning to remove my add code which was placed in above add please help me to remove that code
    tell me the process of removing that code

    ReplyDelete
  7. Thank you so much for the tutorial. I was banging my head trying to figure out how to my ad code above the header in the new interface. You made so easy. Thanks again.

    ReplyDelete
  8. Is there a way to add the ad banner on the outter background instead of on the inner above the header?

    ReplyDelete
  9. how to edit many things at a time.. i mean if i edit html for header then i want to change my font or capitalize it....then again i have to html so will the old one work? (header and capital 1st letter)

    ReplyDelete
  10. please tell me how to display google ads like yours, is above the title of the article and under the title of the blog .. I hope willingness to answer my questions, and send to pawiroy24@gmail.com

    regards, pawiroy

    ReplyDelete
  11. I want to add another ad but not adsense can i still do this?

    ReplyDelete
  12. i created the add gadget space for it, but google refuse displaying it after i tried saving it. THIS IS THE RESPONSE I GET, ''PLEASE CORRECT INFORMATION ON THE FORM''

    ReplyDelete
  13. thanks..it's work on my website ( Malaysia)

    ReplyDelete
  14. Thanks ...
    hey but how i post adds in between my articles so it looks relevant to my article..

    ReplyDelete
  15. how to add link unit from google adsense ?

    ReplyDelete
  16. This gREAT Method Thank You Very much

    ReplyDelete
  17. Thanks for posting "New Element" to Blogger Header, however I did all steps, but still I am not able to add new Gadget in there ! I don't know whats wrong; would you please provide more details if you believe I have to made more modifications than posted in this topic. thanks a lot.

    ReplyDelete
  18. After i making changes as you said, but also i didn't get add gadget above the header pls help me!!!
    check my blog www.freshersjobsaadda.blogspot.com

    ReplyDelete
  19. And, what if i can find either code you mentioned for the step3? I am using a wordpress converted theme on my Blogger Blogspot blog. Please help me...i have subscribed you and waiting a response- thanks

    ReplyDelete
  20. Thank you so much for this! I have been wondering how to do this forever and your tutorial took seconds. Thanks!

    ReplyDelete
  21. Hello, Its a great blog post.

    I have not seen blogging tutorial like yours one.

    Thank you very much.

    ReplyDelete
  22. Thank you SO MUCH for this help! It is INVALUABLE to come across tutorials that are user-friendly and easy to follow! I am a writer and an educator but in NO WAY am I tech savvy! I am passionate about my educational blog and the service we provide to our clients and without sites like this one, I would not be able to continue to strengthen the professionalism of my site. Thank you so very much!

    ReplyDelete
  23. Very well written, informative and easy to follow instructions ~ Thank you. Unfortunately after following them I still no not have the option to add a widget.

    ReplyDelete
  24. Here is my rebuttal for my previous comment! I did get it to work, though after going back to layout I had to refresh my browser and there was the 'add a widget' for my header! Thank you so much! For all those; who like me said it did not work, try just refreshing your browser window after you go back to the layout!

    ReplyDelete