How To Create Your Own 4 Column Blog Footer – HTML & CSS Included

As more and more websites start writing content about the same topics, a first (and lasting) impression is becoming the most important factor of blogs today. You need to make the best first impression that you can make on new visitors and one of the techniques that I am going to share with you today is a useful blog footer. By providing users with links to popular articles, latest comments or even a RSS Subscription button, you can harness the power of people’s curiosity.

This blog footer code should work on most blog structures and formats – If you need help implementing it, feel free to leave a comment and I’ll get back to you.

The 4 Column Blog Footer HTML:

<div id="footercontainer">

<div class="footer">

<div class="column1">

<h5>01. Subscribe!</h5>

<!--- The First Column of The Four Column Blog Footer --></div>

<div class="column2">

<h5>02. Hand-Picked Articles</h5>

<!--- The Second Column of The Four Column Blog Footer --></div>

<div class="column3">

<h5>03. Share The Wealth</h5>

<!--- The Third Column of The Four Column Blog Footer --></div>

<div class="column4">

<h5>04. Contribute</h5>

<!--- The Fourth Column of The Four Column Blog Footer --></div>
</div>
</div>

So the above code is the (W3C.org Valid) HTML for the four column blog footer. Where I have the comments, you can simply delete them and add the appropriate widget code, text or link lists. Some good things to use would be:

1. Get Recent Comments
2. Top Commentators
3. Sociable Icons
4. MyBloglog, BlogCatalog, etc widgets

However, in order to enhance your blog’s impression, I would highly suggest that you do not clutter the footer with too many widgets, links, etc. Simple IS better (and usually results in higher clickthroughs).

Create Your Own 4 Column Blog Footer CSS:

That code by itself does nothing as far as styling goes… so we have to make it beautiful.

#footer {
    border-top:1px solid #ccc;
    font: 15px Helvetica,serif;
    line-height:22px;
	background: #1a1a1a; /* Change this to change the footer background... IE an Image: "url(img/postfooterbg.png) repeat-x;" */
	height:320px; /* If you change this value, be sure to change the footer's height as well as the column's height. */
}
.footercon {
width: 950px;
height: 310px; /* If you change this value, be sure to change the footer column's height as well */
margin: 0 auto;
}

.col1 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
margin-left: 10px;
height: 280px;
}

.col1 h4, .col2 h4,.col3 h4,.col4 h4 {
color: #FFF;
font-size: 16px;
text-align: left;
font-variant: small-caps;
font-family: Arial;
margin:0px;
padding-bottom: 5px;
}

/* This controls how the blog footer's regular text looks - Feel free to change the colours/font family */
.col1 p, .col2 p,.col3 p,.col4 p {
color: #FFF;
font-size: 12px;
text-align: left;
font: 14px Helvetica,serif;
line-height:22px;
margin:0px;
padding-bottom: 5px;
}
/* This controls how column 2's list items hyperlinks look as well as column 4's hyperlinks - Feel free to change the colours/font family */
.col2 ul li a, .col4 a {
color: #EEE;
font-size: 12px;
text-align: left;
font: 14px Helvetica,serif;
line-height:22px;
margin:0px;
padding-bottom: 5px;
}
/* This controls how the blog footer's hyperlinks look - Feel free to change the colours/font family */
.col2 ul {
color: #EEEEEE;
}

.col2 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
height: 280px;
}

.col3 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
height: 280px;
}

.col4 {
float: left;
width: 220px;
margin-top: 15px;
height: 280px;
}

Conclusion and Blog Footer Inspiration:

By addressing a visitor with a complete and professional blog footer, you can take advantage of their interest and pressure them into more visits to your website. With the code above, anyone can harness the code and use it to their advantage for their blog or website!

And now for some pictures of people that have created their own blog footer… use some of these pictures for inspiration!

ProductiveDreams.com

Viget.com

PopStalin.com