For our Beta users, we've heard a lot of requests for adding footers to your blog. We're happy that we've just released this for our beta users. Here's how it works:
First lets get some potentially confusing terminology out of the way. You already have post and page footers - this is the 'Posted by so-and-so on This Date in This Category' text that you can have at the end of Posts and Pages.
With a Blog Footer, we're talking about a footer that will appear at the bottom of every web page of your blog. At the bottom of the blog homepage, the bottom of any archive page, any single-post page... you get the idea. You could but a copyright notice here, a link to your privacy policy or terms of service, a list of your favorite posts, anything you want!
To turn on the Blog Footer go to Design > Content. At the bottom of the page you'll see a box for Blog Footer. Check the box to turn it on and save changes. Go view your blog, and you'lll now see the basic default Blog Footer.
Blog Footers come in two flavors: simple and advanced.
The simple Blog Footer works very similarly to the Navigation Bar. Click on the little 'pencil' icon to configure the footer. You can specify a set of links to appear - defining the linked text ('click here to go there') as well as the destination (the 'http://www.. part). Save. Save Changes. Then view your blog.
Advanced Blog Footers let you have much more control. When you switch from Simple to Advanced, TypePad shows you the raw HTML for the footer:
<ul class="footer-list pkg">
<li class="footer-list-item"><a href="http://andywibbels.blogs.com/test/">Andy's TypePad Blog</a></li>
<li class="last-footer-list-item footer-list-item"><a href="http://www.typepad.com/">Powered by TypePad</a></li>
</ul>
This is similar the code above. But what if you want to add free-form HTML. Let's add in a long swatch of text. Paste in:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus ipsum sit amet tortor. Quisque euismod pulvinar sem. </p>
Click Save. Click Save Changes. View your blog.
You should now have the paragraph of text in your footer. Let's get fancy and add a three column footer:
This HTML below creates three boxes of the same width.
Paste:
<div style="width: 33%; float: left;">
<p>This is the start of the first column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus ipsum sit amet tortor. Quisque euismod pulvinar sem. </p>
</div><div style="width: 33%; float: left;">
<p>This is the start of the second column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus ipsum sit amet tortor. Quisque euismod pulvinar sem. </p>
</div><div style="width: 32%; float: left;">
<p>This is the start of the third column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus ipsum sit amet tortor. Quisque euismod pulvinar sem. </p>
</div>
Now you have three columns across the bottom. Feel free to tinker with those percentages to get the look you want.
You can also add images, javascript widgets from other sites, whatever you'd like!
Extra geek-age for Custom CSS fans: You can style the footer using the #footer ID.
<div id="footer">
<div id="footer-inner">
FOOTER STUFF GOES HERE
</div>
</div>
For the full knowledge base article on this feature, go to the knowledge base article to read more.
