Add spark to your blog with a custom footer

Have you noticed Typepad's new blog footer option? We introduced it to you briefly last month, but now we'd like to tell you a little bit about how to make it work for you!

Regardless of your account level, you can use some HTML or Javascript to add an advertisement, an image, or even some text (such as Copyright information) to your footer. This simple customization is a great way to add some spark to your blog.

Here, we have added a leaderboard ad to our footer:

Simply navigate to Weblogs > Design > Content and tick the box next to Blog Footer. Then, click the pencil icon to customize the content. To add custom text or code, select "Advanced". As an example, the following code can be used to place a leaderboard ad in your footer:

<p align="center"><a href="http://www.typepad.com"><img src="http://www.vivalabands.com/images/ferret_leaderboard_ad.gif" border="0"></a> </p></p> <p>

You can add HTML code, text or script there. Then, save your changes and you're done!

Our Pro and Business Class subscribers can also use some Custom HTML and CSS to place an ad or image above the blog banner.

Want to set this up on your own blog? You can use the code below:

</p> <p><div style="position: absolute; top: 10px;"></p> <p>YOUR AD SCRIPT or other content you want to display above your blog banner. This can be script, code or text. </p> <p></div></p> <p>

Now, add the following code to your Custom CSS area. (Edit the height to match the height of the content you are displaying above the banner area)

#banner {padding-top: 110px;}

Customizing the footer is a great, easy way to add some value to your blog!

(While we're talking about ads, did you know that Six Apart Media creates custom advertising solutions that empower marketers to connect with their target audience and help foster community? It's true, and we have a brand new home on the web: take a look!)

Comments

[serge the concierge]

I tried to add a leaderboard ad from 'Adify' in blog footer using their code and nothing shows on 'Serge the Concierge' after I saved. Do I need to add code before and after the 'adify code' for it to show or is the ad 728 by 90 too big?

Also my privacy issue policy does not show anymore.

How can I have various components in blog footer?

Thanks

Serge

[Account Deleted]

Cool! How do you implement the blog footer if you're using an Advanced template? I couldn't find anything in the Knowledge Database.

[Zalary]

Hi Serge,

When you switch to Advanced to add the ad script, it will override the content you have set under the Simple links area. The easiest way to use both is to copy the HTML from your source code and add it to the Advanced area.

I did this on your main blog, and you can now see the link as well as the ad - and it all looks to be displaying properly!

Hope this helps.

[Zalary]

Hi Shauna,

To create a footer with an Advanced Template set, you can use a custom footer module: http://kb.typepad.com/id/542

The add the module code to the Index Templates. I got you started on your default weblog by creating the footer module and placing the module include code on the Main Index Template so you can see how it's done.

We hope this helps, but feel free to open a support ticket if you need more assistance :)

[Chester Allen]

How can I put a ad above my banner on my blog. The footer ad worked out fine, but I don't know where to insert the code for an ad above my banner....

[Account Deleted]

I followed the instructions to place an ad above my banner (put the html code in the footer box and the padding instructions into CSS) and now my ad is being placed over my banner, not above it. What can I do to correct this? Thanks.

[Bri]

Hi Jonathan!

Depending on the height of your ad, you may need to increase the padding to push your banner further down on the page. The example we provided was for 110px, but if necessary, you can increase it to 150, 180, 200, or anything in between.

If you're still experiencing issues, please feel free to open a ticket and we will work with you to find the perfect code for your blog.

[Bri]

Hi Chester!

The instructions, and code, that we provided should move the ad from your footer to above your banner. Are you not seeing this? If not, would you mind opening a support ticket so that we can take a look and help you out on a one-on-one basis?

Thanks so much!
Brianna

[Account Deleted]

Cheers Zalary! Thank you for your help.

Are there any plans for the Footer to be added to the default Templates and Stylesheet, so when you create a new Advanced Template it will already be there?

Kinda like how the Navigation Bar is in the defaults now - it would be great to have a starting point for styling the footer. I'm cool with editing and tweaking existing code but always muck it up when doing from scratch :)

[Account Deleted]

hello there ^^ This new feature is great however there are some problems. I have followed all the instructions you provided, first, i added the code to my custom CSS but nothing shows so i followed the other option which is the advance option in the footer. It works but it overrides my blog description. Can you tell me what to do so that this will work without affecting my blog description?
Thank you and more power.

sincerely,

Sampaguita

[Account Deleted]

Hello brianna ^^ you guys are very awesome ^^ i have been configuring out on how to make this new feature work ^^ . nothing happened but not until i've read your previous comment above this post ^^ I've been able to figured it out and it worked ^^. Thanks a lot. I also wanna thank Jonathan for giving me an idea ^^. Thank you guys and keep up the good work.

sincerely,

Sampaguita

[Kevin]

I have been looking for something like this for my blog.

[Chester Allen]

Brinna,
Thanks for the help! You rock!
Chester

[Fantasy Hockey Scouts]

Like Shauna above, I'd like to put a footer in my blog (with a copyright blurb) using an Advanced template. Would someone be able to lead me in the right direction?

[Kevin]

I have been wanting to add advertising to my blog in the footer. Thanks.

[REUBEN]

thanks to this addition we were able to use the footer nav banner as a secondary top nav. the regular top nav bar we use for categories. check it out here: www.sharesomecandy.com . looking forward to even more great functionality from typepad.

[Account Deleted]

hello there ^^ i just wanna quote this message from Zalary, this might help you to solve your query.

Quote:
Hi Shauna,

To create a footer with an Advanced Template set, you can use a custom footer module: http://kb.typepad.com/id/542

The add the module code to the Index Templates. I got you started on your default weblog by creating the footer module and placing the module include code on the Main Index Template so you can see how it's done.

We hope this helps, but feel free to open a support ticket if you need more assistance :)

[Account Deleted]

How come all the respondents here expressing interest to put footers and/or say that they have attached the footers, but I don't see them in their blogs? Am I missing something here?

[serge the concierge]

Zalary

Thanks for checking and the clarification.

Is it also quite simple to put an add in banner header as you suggest Pro accounts now can.

Where do you get the code to alter CSS?

Thanks

Serge

body, td { color: #000000; font-size: 13px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; }
p { margin: 10px 0 10px 0; }
blockquote { margin: 20px; }
a { text-decoration: underline; color: #0000FF; }
.content { margin: 10px 10px 30px 10px; }
.footer { margin: 10px; }
.footer a { color: #000000; }

Hi serge the concierge,
Zalary has replied to your comment:
Hi Serge,

When you switch to Advanced to add the ad script, it will override the content you have set under the Simple links area. The easiest way to use both is to copy the HTML from your source code and add it to the Advanced area.

I did this on your main blog, and you can now see the link as well as the ad - and it all looks to be displaying properly!

Hope this helps.

[hotedition]

Great new feature, thanks. I created and added a footer in about 5 minutes and it works well.

1. Can you suggest the optimum image size for a banner in the footer?

2. What about the option to have customised header/footer on different pages of the blog? e.g. on the navigation menu pages?

Thanks.

http://blog.hotedition.com

[hotedition]

That's a really cool idea. Hw much padding did you use to get your new banner/nav bar above the blog banner?

Thanks.

http://blog.hotedition.com

[Account Deleted]

hello there serge ^^ i've visited your blog and i found your google adsense in the footer. i suggest that maybe you can put it above your weblog banner/description so that it will be visible and you will have higher chances of clicks ^^.

to put your google adsense above your weblog description
you need to paste this code:

#banner {padding-top: 180px;} in your CSS stylesheet.

then paste this code in your blog footer "Advanced" section.

YOUR AD SCRIPT or other content you want to display above your blog banner. This can be script, code or text.

just replace the (YOUR AD SCRIPT ......) with
your adsense unit code and that's it ^^ you will become more richer now ^^.lol ^^

[Account Deleted]

hello there ^^ as to the optimum image size for a banner, i guess the leaderboard size is the one.

and with regards to your second question, your header/footer is automatically visible in your other weblogs pages. Because its included in the parent pages of your blog.

if you want to customize your header/footer you can open a
help ticket in your dashboard so that they can response to your
query right away and will guide you on what to do.

[Account Deleted]

hello there bing ^^ you're not missing something, its just that they haven't done it right. if you want an example of this both in header and footer. please visit my blog

http://homeaffiliate.typepad.com
thank you and have a nice day ^^

[Account Deleted]

Trying to view comments on this post... testing testing

[Account Deleted]

Hi there, I'm having trouble seeing the comments on this post. They load fine on the previous and latest posts, just not this one. Tried viewing in IE & Ffox. There was some advice in the comment thread for adding the footer to advanced templates but now it's gone? or did i dream it and i'm about to embarrass myself? hmmm...

[Geu]

This is a test by Six Apart.

[Yann]

My favorite number is π

[Yann]

hey me too!

[Yann]

I like entities! — — —

[Yann]

yes entities are cool

[Yann]

and html entities

[Yann]

hey?