How to create 3 Column Footer For Blogger? | Mission 9

Important– We have the attribution widget added to our previous footer. We need to remove the attribution widget from the template. How? Learn how to remove Blogger attribution(credit) now before proceeding? ALSO REMOVE ALL OTHER WIDGETS FROM FOOTER!!!!!!

1) Adding 3 columns to the Blogger footer.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div> <!-- End of BLOG FOOTER -->

<div id='footer-wrapper'>
<div id='footer-column-container'>
       <div id='footer2' style='border:1px solid;width: 28%; float: left; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
       </div>
       <div id='footer3' style='border:1px solid;width: 39%; float: left; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
       </div>
       <div id='footer4' style='border:1px solid;width: 30%; float: right; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
       </div> </div>
</div>
Step 2) Also add the following CSS into the template:

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

.footer-column {
}

Also make an addition to the following CSS:
From:

#footer-wrapper {
background:red;
padding:10px;
width:880px;
border:1px solid red;
margin:0px auto;}

To:

#footer-wrapper {
background:red;
padding:10px;
width:880px;
border:1px solid red;
margin:0px auto;
display:block;min-height:300px;
}

Preview the template, before saving the template.

You are done!

2. Tips for customization:

1. Will I be able to change the width of each column?
Ans. Yes, You can change the width from Step1 in RED color. Change the width according to your requirements.

2) How to control the height of the footer-wrapper?
Ans. Change the value of min-height:300px in footer-wrapper CSS to any other value. This code is in Blue.

3) Will I be able to add an extra column? or How to make 4 column in footer?
Ans. Yes, you can add N number of columns. Before adding an extra column, you need to make some space for it. The total width of 28%, 39% and 30% comes approximately to 100% width. So change the widths to such a way that you get space for the next column.

For example:

<div id='footer-wrapper'>
<div id='footer-column-container'>
       <div id='footer2' style='border:1px solid;width: 25%; float: left; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
       </div>
       <div id='footer3' style='border:1px solid;width: 25%; float: left; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
       </div>
       <div id='footer4' style='border:1px solid;width: 25%; float: right; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
       </div>

       <div id='footer5' style='border:1px solid;width: 25%; float: right; margin:2px; text-align: left;'>
  <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
       </div>

</div>
</div>

Easy!!!!

Here is a small screen-shot of the final product:

click to expand

NOTE: This tutorial is applicable for any other Blogger Template as well.

For further customization tips, you can comment your requirements, we will help you to the max. Hope you liked this tutorial. Stay tuned for more such tutorials.

— to be continued —