Weekend Project: Build a Content-Rich Blog Footer!

September 02, 2011

This Weekend Project is going to walk you through how to create a content-rich Blog Footer. All Pro members of TypePad can take part in this project to transform their default Blog Footer. In no time at all that simple pair of links at the bottom of your blog will be replaced with great new content!

You should be reasonably comfortable with HTML and CSS to complete this project. Adventurous beginners could probably tackle this if it's taken one step at a time. We do recommend to all Weekend Project Warriors to try these projects out in a test blog before trying it in your real blog. You can learn how to create a new blog in the Knowledge Base.

The steps we'll be taking for this Weekend Project are:

activate the Blog Footer module if it's not already
clean the default code in the Advanced tab to remove the pre-existing content
add additional code if more than two sections of content is desired
choose what content each section should display
add the code for the content chosen
make style tweaks via CSS if necessary

To get started, we need to activate the Blog Footer at Design > Content. If there is a checkmark in the top left corner of the Blog Footer module, then it's already activated; if there is not, then click on the box to place a checkmark and then click Save Changes.

Next, click the pencil icon in the Blog Footer module to open the dialog window. By default you'll see the standard view, which is a quick way to add up to 10 links and link text to the module. Click the Advanced link to view the Advanced section for the Blog Footer module.

Note that the Blog Footer code is broken up into the following structure:

UL (unordered list)
- LI (list item)
- LI (list item)

All basic themes in TypePad automatically display links in the Blog Footer as a horizontal menu. Since the pre-existing content is already sitting neatly next to each other in the published blog, we can take advantage of that by replacing the code between the <LI> and </LI> tags with custom content. We could even add additional <LI> tags if we want content to span the entire width of the Blog Footer.

For this project I've chosen to showcase four sections, so I'm going to remove the pre-existing content from between the <LI> and </LI> tags, then add two more LI tag groups. The finished result looks like this:

<ul class="footer-list pkg">

<li class="footer-list-item">
</li>

<li class="footer-list-item">
</li>

<li class="footer-list-item">
</li>

<li class="last-footer-list-item footer-list-item">
</li>

</ul>

I've dropped the closing </LI> tag to the line below the opening <LI> tag so that it's easier to see and verify that it's there. If there isn't both an open and a closing tag, then the footer, and possibly the design itself, will break. The same is true of the <UL> tag group as well.

You'll want to make sure to retain the default classes (e.g. "footer-list-item") in the tags above so that the code in your design's stylesheet keeps the content within the LI tag groups lined up side-by-side.

The next step is to choose the content we want to display. In my example I chose to display an About section, a search module with social media icons below it, a list of favorite links, then a Flickr widget to showcase some recent photos from my Flickr account.

Need some ideas for content that can sit in the Blog Footer? Here are some ideas we like:

BlogRoll / list of links
Flickr widget
Social media icons
Introduction to you or your blog
Twitter widget
Copyright / Disclaimer
Mission Statement
Welcome note
Contact form
Map with directions
List of your favorite posts
Logo image
Search module

It's completely up to you what you'd like to showcase! Please note, however, that content is not draggable to the Blog Footer at this time and there are some TypePad modules/content that cannot be placed in the Blog Footer due to their requiring template code that will only properly function when added via Advanced Templates. Content not dependant on TypePad template code, however, can be added and will work as expected.

For the About section that I created, I decided to use a header, then add my TypePad Profile image, followed by a brief paragraph about how much of a nerd I am. The code I used was:

<h3>About Brianna</h3>
<p>
<img src="https://example.typepad.com/image.jpg" style="float:left;" />Brianna enjoys CSS and Advanced Templates. A lot. Still, truth be told, she would prefer a cup of tea and a good book (or anime) above all else. On occasion she remembers that she has a blog.
</p>

I added the code between the first <LI> group tags:

<li class="footer-list-item">

<h3>About Brianna</h3>
<p>
<img src="https://example.typepad.com/image.jpg" style="float:left;" />Brianna enjoys CSS and Advanced Templates. A lot. Still, truth be told, she would prefer a cup of tea and a good book (or anime) above all else. On occasion she remembers that she has a blog.
</p>

</li>

So that you can style the About section, change the <li class="footer-list-item"> line to:

<li class="footer-list-item footer-about">

The next section I added was "Want More?" which includes a search module for the blog, as well as a set of social media icons to accounts I have with other services.

For the Search module, I simply added the default Search module to my blog's sidebar via the Content screen. Once the module was added, and changes were saved, I viewed the source code of the blog.

Tip: most browsers let you view the source of a page by using its View menu item then selecting the "source" option.

With the source code of the blog open, I looked for, and copied, the HTML for the search module. The module code begins with  and ends with . After the code was copied, I pasted it into the next <LI> group. I chose to remove the default header code--<h2>Search</h2>--so that only the search field and button appeared.

Next came the social media icons. This is a great time to create and/or use customized icons; there are many sites available online that offer beautiful icon sets for free too. To use the icons you create or download, you'll need to upload them to your File Manager. After uploading, copy the URL of the file in the File Manager then add HTML code for images and links to the Blog Footer.

Tip: click on the name of the file in the File Manager, then copy the URL from the address bar of your browser.

To help keep the search and social areas separated, I added an HTML comment before and after the code for the social media icons. I also added a <DIV> tag group around it, with the "module" class, so that I could better control it's placement.

Here's what that code looks like:

<div class="module">
<a href="#"><img src="http://www.example.com/rss.png" title="Subscribe to RSS Feed" /></a>
<a href="#"><img src="http://www.example.com/facebook.png" title="Follow via Facebook" /></a>
<a href="#"><img src="http://www.example.com/twitter.png" title="Follow via Twitter" /></a>
<a href="#"><img src="http://www.example.com/flickr.png" title="Follow via Flickr" /></a>
<a href="#"><img src="http://www.example.com/youtube.png" title="Follow via YouTube" /></a>
</div>

Note that you will want to replace the # symbol with the full URL of your profile page for the associated account (e.g. http://twitter.com/#!/typepad). You'll also want to replace the example image URLs (e.g. http://www.example.com/rss.png) with the correct URLs of images you've uploaded.

The last two sections I've added to the Blog Footer are a list of links and a Flickr widget.

To add the list of links, I nested a <UL> tag group, with its own set of <LI> tag groups inside. It ended up looking like this:

<h3>Worth Your Time</h3>
<div class="module">
<ul class="module-list">
<li class="module-list-item">
    <a href="http://blog.saymedia.com/" target="_new">SAY Media Blog</a>
</li>
<li class="module-list-item">
    <a href="http://remodelista.com/" target="_new">Remodelista</a>
</li>
<li class="module-list-item">
    <a href="http://www.caryndrexl.com" target="_new">Caryn Drexl Photography</a>
</li>
<li class="module-list-item">
    <a href="http://www.smashingmagazine.com" target="_new">Smashing Magazine</a>
</li>
</ul>
</div>

For the Flickr widget I used a simple script that I can setup to display photos from my Flickr account. Here is the script:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=#&display=random&size=s&layout=x&source=user&user=USERID"></script>

To use it I needed to determine the following:

Flickr User ID (I used idGettr)
how many images to display (I chose 6)
what size images to display (I chose small--"s")
whether to display random photos or latest photos (I prefer random so older photos can also be seen)

Once I determined those things, I updated the line of Javascript in the Flickr widget so that it would do what I wanted. If you want to use the same script, you can copy it from above, then replace # with the number of images you want to display (max of 10) and USERID with the User ID found via idGettr. You can also change the random setting to latest for the most recent images you've made public in your Flickr account.

Here's the code that I used in the Blog Footer:

<h3>Random Photos</h3>
<div class="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=#&display=random&size=s&layout=x&source=user&user=USERID"></script>
</script>
</div>

Since that's the last of the Blog Footer content I wanted to add, I had to make sure that I could style each section I created. To do that requires adding a CSS class to the <li> tag that wraps the sections, similar to the note I provided earlier about adding "footer-about" to the <li>.

These are the classes I setup for each of the sections:

footer-about (About section)
footer-more (Want More? section)
footer-links (Worth Your Time section)
footer-flickr (Flickr section)

Here's how the footer code would look with those classes applied:

<li class="footer-list-item footer-about"> <h3>About Me</h3> <p> <img src="https://example.typepad.com/.a/#########-75wi" style="float:left;" /> Brief author bio can be added here. </p> </li> <li class="footer-list-item footer-more"> <h3>Want More?</h3>  <div class="module-search module"> <div class="module-content"> <form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/BLOG-ID/search"> <input type="search" name="filter.q" results="5" value="" /> <input type="submit" value="Search" /> </form> </div> </div>   <div class="module"> <a href="http://example.com"><img src="https://example.typepad.com/icons/rss.png" title="Subscribe to RSS Feed" /></a> <a href="http://example.com"><img src="https://example.typepad.com/icons/facebook.png" title="Follow via Facebook" /></a> <a href="http://example.com"><img src="https://example.typepad.com/icons/twitter.png" title="Follow via Twitter" /></a> <a href="http://example.com"><img src="https://example.typepad.com/icons/flickr.png" title="Follow via Flickr" /></a> <a href="http://example.com"><img src="https://example.typepad.com/icons/youtube.png" title="Follow via YouTube" /></a> </div> </li> <li class="footer-list-item footer-links"> <h3>Worth Your Time</h3> <div class="module"> <ul class="module-list"> <li class="module-list-item"> <a href="http://blog.saymedia.com/" target="_new">SAY Media Blog</a> </li> <li class="module-list-item"> <a href="http://remodelista.com/" target="_new">Remodelista</a> </li> <li class="module-list-item"> <a href="http://www.caryndrexl.com" target="_new">Caryn Drexl Photography</a> </li> <li class="module-list-item"> <a href="http://www.smashingmagazine.com" target="_new">Smashing Magazine</a> </li> </ul> </div> </li> <li class="last-footer-list-item footer-list-item footer-flickr"> <h3>Random Photos</h3> <div class="flickr"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=random&size=s&layout=x&source=user_set&set=#"></script> </div> </li>

I clicked OK and saved my changes. Once you do the same, you may notice that you need to make some CSS edits, because you definitely don't want something like this appearing:

That happened because the default styles for the Blog Footer allowed the previous menu items to expand to the width of the link text. Since none of the content I added has any styles associated with it yet, each <LI> is being allowed to fill the entire width of the footer.

To correct the issues for my example, I wrote CSS that I thought would best complement the footer in the Mosaic theme, as well as the content I've placed within the Blog Footer. The CSS provided below can be added to either the Custom CSS screen at Design > Custom CSS (if you're a Pro-Unlimited member or higher) or can be added to the Blog Footer itself. You can find out how to do both below.

Do note that the CSS I wrote is much more of a guide than a set of styles you have to use for your Blog Footer. With that in mind, the CSS I used is below:

/* Header Settings for Blog Footer */
#footer ul li h3 { font-weight: bold; color: #666; }

/* Set Spacing of Blog Footer LI Items */
#footer ul li { margin: 0px 10px; }

/* Blog Footer About Section */
#footer ul li .footer-about { width: 220px; padding: 0px 10px 10px 0px; }
#footer ul li .footer-about img { margin: 0px 10px 0px 0px; padding: 0px; }

/* Blog Footer Want-More Section */
#footer ul li .footer-more { width: 190px; padding: 0px 10px 10px 10px; }
#footer ul li .footer-more input[type="search"] { width: 100px; }

   /* Blog Footer Want-More Section -- Social Media Icons */
     #footer ul li .footer-more a {
       display: inline;
       float: left;
       position: relative;
       clear: none;
       margin: 0px;
       padding: 0px 2px;
     }

/* Blog Footer Links Section */
#footer ul li .footer-links { width: 150px; padding: 0px 10px 10px 0px; }
#footer ul li .footer-links div .module {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}

#footer ul li .footer-links ul .module-list li {
margin: 0px !important;
padding: 0px !important;
line-height: 1em;
}

#footer ul li .footer-links ul .module-list li a {
text-decoration: none;
border-bottom: 1px dashed #ccc;
margin: 0px;
padding: 5px 0px 5px 0px;
}

#footer ul li .footer-links ul .module-list li a:hover {
color: #ddd;
background-color: #333;
}

/* Blog Footer Random-Photos Section */
#footer ul li .footer-flickr { width: 240px; padding: 0px 0px 10px 10px; }

#footer ul li .footer-flickr .flickr a {
display: inline;
float: left;
margin: 0px;
padding: 0px 5px 5px 0px ;
}

If you're a Pro-Unlimited member you can copy the code and paste it directly into the Custom CSS screen of your test blog. If you're a Pro-Plus member then you won't have access to the Custom CSS screen. You can, however, click the pencil icon for the Blog Footer module, then type <style type="text/css"> ABOVE all other code already in the Advanced section of the module. Once you've typed that in, paste in the CSS you copied and then type </style> to close the CSS block. The finished result will look like this:

<style type="text/css">
/* Header Settings for Blog Footer */
#footer ul li h3 { font-weight: bold; color: #666; }

/* Set Spacing of Blog Footer LI Items */
#footer ul li { margin: 0px 10px; }

/* Blog Footer About Section */
#footer ul li .footer-about { width: 220px; padding: 0px 10px 10px 0px; }
#footer ul li .footer-about img { margin: 0px 10px 0px 0px; padding: 0px; }

/* Blog Footer Want-More Section */
#footer ul li .footer-more { width: 190px; padding: 0px 10px 10px 10px; }
#footer ul li .footer-more input[type="search"] { width: 100px; }

   /* Blog Footer Want-More Section -- Social Media Icons */
     #footer ul li .footer-more a {
       display: inline;
       float: left;
       position: relative;
       clear: none;
       margin: 0px;
       padding: 0px 2px;
     }

/* Blog Footer Links Section */
#footer ul li .footer-links { width: 150px; padding: 0px 10px 10px 0px; }
#footer ul li .footer-links div .module {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}

#footer ul li .footer-links ul .module-list li {
margin: 0px !important;
padding: 0px !important;
line-height: 1em;
}

#footer ul li .footer-links ul .module-list li a {
text-decoration: none;
border-bottom: 1px dashed #ccc;
margin: 0px;
padding: 5px 0px 5px 0px;
}

#footer ul li .footer-links ul .module-list li a:hover {
color: #ddd;
background-color: #333;
}

/* Blog Footer Random-Photos Section */
#footer ul li .footer-flickr { width: 240px; padding: 0px 0px 10px 10px; }

#footer ul li .footer-flickr .flickr a {
display: inline;
float: left;
margin: 0px;
padding: 0px 5px 5px 0px ;
}
</style>

Remember, the styles I've provided are merely suggestions. You'll want to also take into account that if you change the class names (e.g. "footer-flickr" or similar) in the HTML of the Blog Footer's Advanced section, you'll also need to change the class name in the CSS (e.g. .footer-flickr).

And here is the final product:

Some additional changes you could make in your own Blog Footer:

Change the background color of the entire footer
(e.g. #footer { background-color: #666666 !important; } will do that for you; replace #666666 with you preferred background color for the footer)
Add a background image to the entire footer
(e.g. #footer { background: #666666 url(http://www.example.com/image.jpg) no-repeat top left; } to set an image as the background that won't repeat and displays from the top-left of the Blog Footer)
Add more content by increasing the number of <LI> tags in the original setup
(e.g. <li class="footer-list-item">)

We hope this will be a fun new project for you to take on. Feel free to let us know when you're done implementing your new Blog Footer; we'd love to take a look. In the meantime, have a great weekend!

09:43 PM in Tips and Tricks, Weekend Projects | Permalink | Comments (3)