August 16, 2011

Configuring the Blog Footer

The Blog Footer feature will allow you to add content to the very bottom of each blog page, below your posts and sidebar content. This can be used for displaying links to pages in your own blog, a copyright note, links to other websites, or custom code, such as banners or widgets.

To configure the Blog Footer, go to Design > Content, and scroll to the Blog Footer option at the bottom of the page. Click the pencil icon to bring up the Footer Configuration menu.

There are two options for the Blog Footer. The Simple option will allow you to enter the Title and URL for up to ten links. The Advanced option will allow you to input your own custom HTML code or code for a widget or banner that you've received from a third party.

Simple Footer Configuration

When you first select the Simple option, the fields will be pre-populated with the Title and URL for your blog and a "Powered by Typepad" link. These links can be edited, replaced, or removed to suit your needs. You can add additional links by filling in a Title and URL for each, clicking Save when complete.

Simple Footer Configuration

Centering Footer with Custom CSS

The Custom CSS feature is available to Pro Unlimited and Business Class bloggers, and you can use the Custom CSS code below to center your Blog Footer.

Advanced Footer Configuration

The Advanced footer option will allow you to input your own HTML, CSS and/or JavaScript code. When you first choose the Advanced option, you will see example code that looks like the following:

Advanced Footer Configuration

You can edit the HTML to use your own links, add additional code above or below those links (such as a banner ad), or replace the link code completely with your own HTML. This is especially useful for placing horizontal banner ads at the bottom of the page. Advanced configuration is not available with the Nimble theme currently.

If you would like for your banner or other code to be centered, you can use the following:

<div style="text-align: center;">your code here</div>

Below is an example of the default link code and custom code for a banner image together:

Custom footer code

Enabling & Disabling the Blog Footer

To enable the Blog Footer, check the box next to it at Design > Content and Save your changes at the bottom of the page. You can disable the Blog Footer by de-selecting it from the same page. The links or code you've entered will remain saved in the configuration and can be edited at any time by clicking the pencil icon.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services