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

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>
<div id="adsense">
<center></center>
</div>
</div>
   
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.
   

Comments

[Posted: Aug 10, 2006 12:02:00 PM]

Thanks. 10' spent and here it goes!

[Posted: Aug 12, 2006 1:06:37 PM]

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

[Posted: Aug 30, 2006 11:39:08 PM]

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...

INSERT ADSENSE CODE

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.

[Posted: Aug 30, 2006 11:40:38 PM]

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

[Posted: Apr 21, 2007 4:22:36 PM]

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

[Posted: Apr 24, 2007 5:48:19 AM]

Enrico,

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

[Posted: Jan 13, 2009 2:50:23 PM]

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

[Posted: Apr 1, 2009 8:58:36 AM]

Is there a reason why this would not be clickable in firefox? I did this and neither the logo nor the adsense block is clickable in firefox, yet they work fine in IE.

Is there a workaround for this?