Tuesday, April 7, 2009

Add Google Adsense to Blogger Header

In this Blogger tutorial you will learn how to add Google Adsense to the header of your Blogger blog. This article assumes no knowledge of Blogger and provides a walkthrough of the steps involved to add Google Adsense to the header of your blog.

This is the third Blogger tutorial in a series on adding Google Adsense to a Blogger blog (Blogspot blog).

Place Google Adsense Below Post Title in Blogger
Better Placement of Google Adsense on a Blogger Blog

  1. How To Add Google Adsense to the Header (Above the Title)
    If you want to add Google Adsense to your header for instance above the title you can by adjusting your template to give you the option of adding more than one widget to the header area.

    1. Login to Blogger and navigate to Design > Edit HTML

    2. Back up your template as a precaution by downloading the full template to your computer

    3. Using CTRL + F to bring up the search box find the following line of code. For default Blogger templates - Layout (2006) such as Minima, Thisaway and Sand Dollar and for many custom templates find <div id='header-wrapper'>

      For new Blogger templates such as Simple and Awesome Inc find this line <div class='region-inner header-inner'>

    4. Replace the following code in red:
      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      with

      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

    5. Save Template

    6. Navigate to Design > Page Elements (previously Layout > Page Elements) and view the new option to add a gadget to the header area

      Add a Gadget to the Header to insert Google Adsense

    7. Click on Add a Gadget and select the Google Adsense gadget.

    8. Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an Adsense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template.

    9. Click Save

    10. Click View Blog to see your new Google Adsense unit in place. All going well your new ad unit should appear look something like the image below

      How to Add Google Adsense Ad Unit Above the Title in the Header of Blogger - 728x15 Linked Google Ad Unit


  2. How to Add Google Adsense to the Header (Below the Title)
    To have your new Google Adsense linked unit appear below the title the steps are the same as above. The difference is that you will need to shift the ad unit into position by using the drag and drop feature to move the widget below the header title in the Design > Page Elements page.

    Add Google Adsense gadget below blog title in Blogger
    Add Google Adsense 728x15 Ad Unit to Blogger Header Below the Title


Tips and Troubleshooting
By default Blogger will left align these ads so if you want to center the Adsense unit then use the <div align='center'>


How to Center a Google Adsense Unit in Blogger
  1. Once you have created your Google Adsense unit go to Design > Edit HTML

  2. Check the Expand Widgets Template box

  3. Find the code you replaced in Step 4

    <b:section class='header' id='header' maxwidgets='3' showaddelement='yes>

  4. Directly below you will see lines of code that resemble the following:

    <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
    <b:includable id='main'>
    <div class='widget-content'>
    <data:adCode/>
    <b:include name='quickedit'/>
    </div>

  5. Add the following code shown in red
    <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
    <b:includable id='main'>
    <div class='widget-content'>
    <div align='center'><data:adCode/></div>
    <b:include name='quickedit'/>
    </div>

  6. Save template and view your Adsense widget which will now be centered


In this Blogger tutorial you have learnt how to add a Google Adsense unit above and below the blog title in the header section of your Blogger blog (Blogspot Blog). I have also demonstrated how to center the Google Adsense unit. As always any questions please ask.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogspot Blogger Guide to Google Adsense Placement
Google Adsense Tips for Blogger Blog
Add an Affiliate Banner to the Blogger Sidebar
Better Placement of Google Adsense on a Blogger Blog
Add Google Adsense or Banner Above Blogger Header
Place Google Adsense Below Post Title in Blogger
Add Google Adsense Below Blogger Post Content
5 Easy Ways to Make Money from Blogger
Bloggers Guide to Google Adsense Myths



Subscribe to Blog Know How by Email

43 comments:

faystie said...

Nice. Thanks for this. I actually bookmarked your page. :)

The Wizz said...

Articles about adding Google Adsense to Blogger are proving really popular. Keep your eye out as I will be posting some more articles in the Adsense series soon :-)

Disclaimer: said...

Thank you so much for this but i can't center it for some reason. what other command should i add so i can have my ads under the header? It goes all the way to the left..

my site is: urlhollywood.blogspot.com

section class='header' id='header' maxwidgets='3' showaddelement='yes'
:widget id='AdSense1' locked='false' title='' type='AdSense'
:widget id='Header1' locked='true' title='Free Movies (Header)' type='Header'
:section

lesson said...

ulesson.blogspot.com

The Wizz said...

Disclaimer thanks for your query. You can easily center the code. I have added instructions on how to do this to the article under troubleshooting. Hope you will continue to read along

Woody Thompson said...

Thanks

Woody Thompson said...

Thanks! It has helped my site really nicely.
www.thecarnerds.com

The Wizz said...

Woody glad to have made the difference on your blog. Don't forget to bookmark this site so you can call back soon. Thanks

Pete Kosednar said...

This was a great tip! I will remember this if I decide to make changes. Thanks

The Wizz said...

Pete. I love feedback on my articles. Thanks for letting me know you liked this one. Hope you will continue to check my blog regularly for more Blogger help tips.

Robert A. Jones said...

Great tutorials!

The Wizz said...

Thanks for taking time out to leave some good feedback for me Robert. Hope you will join the community here.

My2Gs said...

I did the first code alteration so I could have Google Adsense ads above my header. The problem is that it's showing up right on top of my header. Any suggestions?
http://www.pbandpickles.com

The Wizz said...

My2Gs if I understand you correctly you want to place a Google Adsense ad unit above the header rather than within the header is that right? If so yes I do know how to do this but it probably is best explained via a post. I hope to write this post by the weekend if not before so please keep checking.

Special gift said...

I am not able to drag it below my header..how to do that

The Wizz said...

Special Gift if you want to add Google Adsense below the blog header rather than to the header try my article on better Google Adsense placement. how to add google adsense below header and above the first post

PixelShots said...

am confused with the content centering code..i have added the page elementsuccesfuly..but centering it not seems working and i can't find the codes in ma template.. the status of code now is

div id='header-wrapper'
b:section class='header' id='header' maxwidgets='3' showaddelement='yes'
b:widget id='Header1' locked='true' title='PIXELSHOTS (Header)' type='Header'
b:includable id='main'

b:if cond='data:useImage'
b:if cond='data:imagePlacement == "REPLACE"'


code only no < and >

can't find code to align it to center..

my blog is pixelshots.blogspot.com

The Wizz said...

PixelShots once you change the maxwidgets to 3 you then need to create your Adsense ad using the Add Gadget in Page Elements. Then go back to Edit HTML and you will see that the code for the Adsense ad has been added to your template. You will then be able to add the alignment code to center your ad. Any problems come back to me.

shumail said...

hi,wizz it worked for me for 1 blog but on other it does not show extra widget what to do?
its not working for "son of moto" template

The Wizz said...

Hi shumail I have tested the son of moto template and had no problems adding adsense to the header using instructions outlined above. You don't say what part you were having problems with exactly. Is it finding the right code to change? If so don't expand widget templates and look for the header code block which appears straight after the outer wrapper block. Come back to me if you are still having problems and I will take a look at your template

Anonymous said...

awsome dude thankssssssss

Anonymous said...

I will try that on

http://nett4marketing.blogspot.com


thakns

Anonymous said...

thx man

montana said...

I was looking for this for a long long time. Ironically i `ve fond some guy that knows about html but he wanted $25 to add a header banner on my blog. WAY WAY TO MUCH!

Thank u for this post.

Vandana said...

This is great tip! Gonna try right away, Thanks

www.goodtoolsgoodcrops.com said...

Where do I post the code?




div class='widget-content'>

(IT DOESNT WORK HERE)

/div

The Wizz said...

Hi goodtoolsgoodcrops. Your question has lead me to update this Blogger article about placing Adsense units in a Blogger header to improve clarity.

To answer your question before searching for the widget code you need to make sure that you have expand widget templates checked in your Blogger template. The widget code is inserted automatically by Blogger. All you have to do is find it. Where exactly it is depends on the Blogger template and the actual blog but it will be past b:if cond='data:useImage' and the description. Unless you have added another widget to your Blogger header it will be the only widget. Look for the code as per Step 5 in the centering instructions. Good luck!

exis said...

Hi The Wizzz.. you are wonderfully helpful... thanks a million for your kind free tutorials. Good luck

Marketing for beginner said...

Thanks a lot, I found this blog through searching in search engine. Finally found this useful tips about adding adsense code below the title...

I will revisit this blog again... Keep sharing pals.. See you...

Rhea said...

Thanks for the info about this header .. I will put this also on my blog the adsense make money online...

balu said...

thank . how add images after google adsens

The Wizz said...

I am assuming you want to hard code the image below the Adsense unit is that right? If so adding an image to your Blogger template is the same as adding it to a Blogger post in most respects. To add a clickable image to Blogger for instance in a Blogger post (check edit html in your Blogger post editor for an image you have uploaded to see the code). The main difference is that you need to use single quotes instead of double quotes within the Blogger template. If the image is not clickable use only the data contained within the <img> tag. If this doesn't make sense to you come back to me.

Blogger trix said...

thank you friend.good tip.

www.bloggertrix.com

zafar said...

Thanks. It was very helpful.
It is sajepress.com
Regards.

worldofbasketball said...

Thank you very much

Georgi said...

helped me a lot ! thank you !

Jade said...

Thanks a lot!
I'm a new blogger and you reali helped :)

body fitness said...

thanks for this post. helps me a lot.
http://xxxmehide.blogspot.com/

minecraft said...

very interesting for my blog. Thanks.

Deoraj Chaudhary said...

i liked the template you used for this blog. As the blog template name is hidden, i will appreciate if u kindly provide me the name of the template u used. thanks.

The Wizz said...

Hi Deoraj. I have just written an article about using older templates in Blogger and how to find them. How to Use Old Style Templates on Blogger Blogspot. The template I am using is a 3 column enhanced version of Rounders 3 .

Learn English said...

Great work!

Rehut blog said...

Very Good, I will try this for more CTR.

Post a Comment