Styling Blogger Footer Section Professionally | Mission 14

Previously, we saw to to redesign the Blogger main content area for our “Simple Blogger Template”. Today, it is time to go further down the template, which was looking ugly in the previous version to make it look professional and standard.

This tutorial is easy to understand as we have not done anything much. We have just styled the footer background with good colors. I’ve also re-sized the width of each columns of the footer a bit.

PREVIOUS MISSION – Mission 13: Restyling the Blogger content area.
NEXT MISSION – Mission 15: Bringing the post time-stamp, comment count and published by below the post titles.

MISSION 14 OBJECTIVES:

1. Re-size the Blogger footer columns to fit properly.
2. Changing the footer background color(easy guys!!!).
3. Making the footer height auto re-sizable.
4. Adding some more styles.

Note: This is our templates version 1.1 as we will have been making considerable changes now.

Here is a snapshot of how the styled Blogger footer looks now:

click to enlarge

EXPLANATION:

1 Re-size the Blogger footer columns to fit properly

We are first defining the a width for the footer-wrapper using the below CSS:

CSS:

#footer-wrapper {
overflow:auto;
background:#aaa8f0;
width:997px;
margin:0px auto;
display:block;
border-top:8px solid #c28080;
}

We rename the footer column ids:
From:
id='footer2'
id='footer3'
id='footer4'

To:
id='footer'
id='footer'
id='footer'
This is done to keep the footer columns easily configurable.

We now add individual widths to the 3 footer columns in the HTML as shown below:

HTML:

<div id='footer' style='border:1px solid;width:200px; float: left; margin:2px 2px 2px 4px; text-align: left;'>
<div id='footer' style='border:1px solid;width: 400px; float: left; margin:2px 5px 2px 2px;text-align: left;'>
<div id='footer' style='border:1px solid;width: 370px; float: right; margin:2px; text-align: left;'>

You can notice that all the above footer columns have the same ids and different widths.

2 Changing the footer background color(easy guys!!!)

This is the most easy one. We color the footer-wrapper and footer-column-container with the same color using the below CSSs:

CSS:

#footer-column-container {
display:block;
background:#aaa8f0;
}

#footer-wrapper { overflow:auto; background:#aaa8f0; width:997px; margin:0px auto; display:block; border-top:8px solid #c28080; }

#footer-wrapper { overflow:auto;background:#aaa8f0; width:997px; margin:0px auto; display:block; border-top:8px solid #c28080; }

#footer-wrapper { overflow:auto; background:#aaa8f0; width:997px; margin:0px auto; display:block; border-top:8px solid #c28080;}

#footer h2{ margin:3px;  padding-left:5px; margin-bottom:3px;  border-left:5px solid #444;  font-family:"Comic Sans MS", cursive, sans-serif; background:#668763; color:#fcfcfc;}

#footer a, #footer a:visited { color: #2ec8d9; }
#footer a:hover{ color: #d9c564; }