« Trouble-Shooting Your Blog: Simple Mistakes can Have Complicated Results | Main | Use TypePad's New Technorati Tag Feature to Embed Tags in Your Blog Posts Without Editing HTML »

John T. Unger

How To: Place AdSense Ads In A Header at the Top of Your TypePad Blog

John T. Unger July 18, 2006

Rich Owings sent me a hack for putting AdSense Ads at the top of TypePad blogs. He based it on my tutorial here for top level navigation menus, and also credits Gary at the Digital Point CSS forum, for helping with CSS. I'm still not using AdSense, so I haven't tested this, but ou can an example of how it looks at Rich's blog, GPS tracklog.

To place AdSense ads at the top of your blog, follow the steps in the extended post. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.

Note: when altering your existing template code, it is a very good idea to copy your code and paste it into a text document in case you make a mistake and need to start from scratch. More tips on Code Hacking Safety can be found here: 10 Tips for Working with Advanced Templates.

Step One: Adding the CSS to Your Blog

  1. Click the Weblogs tab in TypePad and select the blog where you want to place AdSense ads.
  2. If you are already using an advanced template, click the Design tab. If you are using a Basic template follow these instructions to convert your template to advanced.
  3. Under Advanced Templates, Click on your Stylesheet file. Scroll all the way to the bottom and paste the following CSS code below where it says /* other css */.

    #adsense {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 20px;
    background-color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

  4. Change the background color and other values to suit your taste.
  5. Click Save at the bottom of the page.

Step Two: Create A Template Module for Your AdSense Header

  1. Near the bottom of the page, locate and click Create New Template Module.
  2. Give your new template a name of banner-header by typing it in the Template Name field.
  3. Paste the following code into the Template Body field.

    <!-- banner-->
    <div id="banner">
    <div id="banner-inner" class="pkg">
    <$MTWeblogIncludeModule module="banner-header"$>
    <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
    <h2 id="banner-description"><$MTBlogDescription$></h2>
    <div id="adsense">

  4. Generate code for a 728x15 AdSense link unit.
  5. Paste it into the Template Body between the <center> and </center> tags.
  6. Click Save at the bottom of the page.

Step Three: Including Your New banner-header Module into Your Templates

  1. Return to the Design tab for your blog.
  2. Click on your Main Index Template. Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$>
  3. Click Save.
  4. Return to the Design tab and click on your Archive Index Template.
  5. Replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> and click Save.
  6. Return to the Design tab and for each of the following templates Category Archives, DataBased Archives, and Individual Archives replace <$MTWeblogIncludeModule module="banner"$> with <$MTInclude module="banner-header"$> Click Save for each one.
  7. You're done! Click Save and Republish your site (be sure that Publish all Files is selected in the popup window).
  8. 8. View your blog in a new tab or window. If you don't see the ads at the top, hold the shift key down the first time you reload the page.

More Like This: Advanced Templates , Google , Hacks for Ads , Hacks for Layout + Design


Laurent Bazet says:

Thanks. 10' spent and here it goes!

Darla says:

Is there a code or string that will place the ad in the top right corner?

Rich Owings says:

I've actually pulled down the header ad for the time being. I want the toppaying ads to show up in my post and the header HTML comes first.

Darla, you can put the code in the corner of a post this way...


Just be sure to put it on the continuation page of a post, not on the front page. Otherwise, when people pull up category views, you may be trying to get AdSense to serve more than the allowed limit of ads.

Rich Owings says:

Oops. The surrounding table code didn't come through. I'll sideband you.

enrico says:

Is this possible to do using custom css and not having to use Advanced template sets?

john t unger says:


You need to use templates to hold the Adsense code. There's no place in the CSS to put it.

Chris says:

Can anyone update this? I am sure this is outdated but would love to do the hack. Thanks!

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference How To: Place AdSense Ads In A Header at the Top of Your TypePad Blog:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media


Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count



Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page



    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License