« Moving an Entry from One Blog to Another | Main | Pull Down Menus »

Adding a Footer

footer-example.gif

Many weblogs have a footer bar running across the bottom of the page with information that pertains to all of the pages of the weblog, such as copyright, XHTML validation, software used to create the weblog, etc.

Adding a footer to your Movable Type weblog is pretty straightforward.

1. Create a Footer Id in your stylesheet.

Include elements for how you want the links in your footer to appear. For example:

#footer { 
        font-family: Trebuchet MS; 
        font-size: x-small;
        padding:2px;
        margin:0px;
        background-color:#CBE3F6;
        color:#fff;     
        border-bottom: 1px solid #9EC4E2;
        border-top: 1px solid #9EC4E2; 
        text-align:center;
        }

#footer a { 
        color:#fff;
         }

#footer a:hover {
        text-decoration: none;
        }

2. Create the code that will comprise your footer.

<div id="footer">

Created by YourNameHere | 
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> | Powered by <a href="http://www.movabletype.org">Movable Type</a>

</div>


3. Add a Footer div section to your index and archive templates.

At this point, you can either add the footer code directly to each template, right after the <br clear="all" /> or <div style="clear: both;">&#160;</div> and right before the closing container div tag, or you can create a template module and use a PHP or MT Include to include the footer into each of your templates. I suggest going the include route. That way if you make any changes to your footer, you only have to make them once. See Using PHP and MT Includes for directions.

Save your templates and rebuild your site.

Comments (4)

Simon Cox Author Profile Page:

I use a list of little images (Button builder at http://kalsey.com/tools/buttonmaker/ ) which looks great but even though I used a list I found that the links next to each other did not pass accessability testing so I introduced text as well and hid it in a span (a basic image replacement scheme. If you have a broiwser where you can turn off the css you will get a nice list of links.

My footer code example:
<div id="footer"><!-- div start id="footer" -->
<ul>
<li><a href="http://feeds.feedburner.com/SimonCoxLifeBlog">
<img src="/assets/button_feedburner.png" alt="RSS 2.0 feed" title="Feedburner" width="80" height="15" />
<span class="hidden">Feedburner RSS feed</span></a><span class="hidden">|</span></li>
</ul>
</div><!-- div end id="footer" -->

and the css:
.hidden{
display:none
}
#footer ul{
margin:0;
padding:2px;
font-size:x-small
}
#footer li{
padding:0 1px 0 0;
display:inline;
list-style:none
}
#footer img{
border-top:1px solid #cecea5;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-left:1px solid #cecea5;
vertical-align:middle
}

I am sure thats not perfect but its a good start!

BER!:

This saved me hours of profanity laced hair pulling CSS learnin'.

Thanks!

And, by the way, if you are using 3.2, just drop that code for the templates just above the last /div at the bottom of all the pages.

char:

This was very helpful! And after you rebuild it may take a refresh or two before you will see the footer :)

Is there a way to add a footer to the RSS feed. I am trying to fite off site scraping and have heard that this is a good technique in Wordpress.

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)