How to add content between your blog and the top of the browser

Say you'd like to put an ad banner above the header of your blog, or create a space to call attention to a special event?

This is an easy hack to implement in advanced templates. As an example, take a look at what I did over at The Mommy Insider today. Alicia needed a navigation menu and also wanted to run an ad banner above the site to match the style of her static website at www.themommyinsider.com

To run your own ad banner, google ads, or promo space follow the tutorial below:

1. Go to the Design tab for your weblog.
2. At the bottom of the page, click on Create new template module.
3. Type "adspace" into the Template Name field. (you can use any name you like,
4. Paste the HTML for your ad or other content into the Template Body field. You can use any HTML you like in this space, as well as JavaScript or even TypePad specific tags (for instance if you wanted to include typelists, categories, etc.).
5. Click Save.
6. Click the Select a Template to Edit menu and go to your Archive Index Template.
7. Type <$MTInclude module="adspace"$> directly after <div id="container"> in your template. It should now look like this:



<div id="container">
<$MTInclude module="adspace"$>
<div id="container-inner" class="pkg">

8. Click Save.
9. Repeat step 6-8 with your Main Index Template, your Category Archives, DateBased Archives and Individual Archives.
10. Republish your blog. The content should now hang above your blog, outside the background container area.

Bonus Tip:

I wasn't 100% sure that this hack would work when I tried it for the first time today and I had to apply it to a site that was live. I was pretty sure nothing would go wrong, but, you know…So here's a trick I came up with for testing new code on a live site:

1. If you're adding a new template, do that first and save and republish the blog (before adding the new template code into any of the existing templates).
2. Now, test the new template by adding it to the Archive Index Template only. This page only displays links to your archived posts, and is rarely actually visited or seen by anyone. Click save and republish, then go take a look at your Archives page (the URL will be yourdomainname.com/archives.html or http://yourblog.typepad.com/your_blog/archives.html).
3. If the archives page looks fine and has no bugs, then go right ahead and add your code to the other index and archive pages!

Comments

[Posted: May 1, 2007 7:40:04 PM]

Can you tell me, how did The Mommy Insider do her top navigation? I'm similarly curious about Go Fug Yourself (gofugyourself.typepad.com). Did they use a variation on your CSS horizontal nav bar hack, or is this some sort of image-mapped blog header imported as a .jpg?

[Posted: May 1, 2007 8:13:39 PM]

Kristen,

I can't speak for Go Fug Yourself, but yes, for the Mommy Insider I used an image mapped Blog header that I put together pretty quickly using FireWorks. Kristen had sent me the image with a text layer in .png format. I just used invisible layers to set up the link slices and used FireWorks export to HTML feature to create the image map.

[Posted: May 2, 2007 9:22:11 PM]

I have got to learn Fireworks. This is high on my to do list. Thanks, John.

[Posted: May 12, 2007 8:55:35 PM]

For some reason, under the current Pro version, I cannot (for the life of me) locate the 'create a new template module' you are referring to in this post.

All I see is Change Theme, Change Layout, Select Content, Order Content and Edit Custom CSS.

Is this information only pertinent to an older version of typepad ?

P.S. Really digging this TypepadHacks Website. Keep up the Great Work.

J

[Posted: May 12, 2007 10:42:29 PM]

Okay - that works just as explained....
DooH! - I needed to convert my template to 'Advanced' mode first, then it was very easy to access the files mentioned above.

-Cheers!

[Posted: May 15, 2007 4:34:11 AM]

So this Navigational ONLY appears on the FRONT page.

How about including it on all pages?

I'm a Newbie to this (carrot)MT$______(end/carrot> Stuff . . . . . .

[Posted: May 16, 2007 7:40:20 PM]

Hi John,

I've been teaching myself to make image mapped banners, and so far so good - except that I can't get it to show up. I used Typepad's instructions for adding the custom CSS to my Stylesheet so that I can replace the default .gif with my image mapped html (uploaded to the File Manager). However, when I hit Publish I just get white space. Is there something else I should be doing, code-wise?

I can't find an answer to this anywhere.

Thanks.

[Posted: Aug 2, 2007 6:43:15 PM]

Would this hack work also for Flash banners?

[Posted: Aug 29, 2008 3:53:12 PM]

Hey John-

Great hack. I've got it installed into a test site now before it goes live on my main site. Here's the test site:

http://mdotmay.typepad.com/gj3/

Do you know of a way to center the ad space in the space above the header image? The image is 870 pixels wide.

Altnernatively, is there a way to add a second image in the space next to the Leaderboard space, to fill the gap between the 728 and 870 pixels?