How to Make 3 Columns Blog Footer

Blogger Sampah today will give How to Make 3 Columns Blog Footer. Footer is located at the bottom of the blog. In the default blog template, footer only 1 column.

For a variety of needs, sometimes we need a blog with 3 columns footer.

How to make footer to be 3 columns?

First, select the 'Layout' - 'Page Element'.

Then, please go to the menu 'Edit HTML'. We should do is find out how long the entire footer. Footer length generally equal to the length of outer. To find out, please friend search the following code:

(Some template may have a different code).

#outer-wrapper {
background-color: #473624;
border: 1px solid #332A24;
width: 9oopx;
margin: 0px auto;
padding: 15px;
text-align: center;
font: $ bodyFont;
}

Value on the width is the same as the length of footer.

Then copy code below :

#footer2 {
clear: both;
float:left;
padding-right: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer3 {
float:right;
padding-left: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer4 {
float:right;
padding-left: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Paste above code #footer or #footer-wrapper

Value on the 'width' is the value for the width of each column. Adjust the width of the columns at the original column.

For example, if the width of original column is 900px. For new 3 columns, make width each column 295px.

When finished, search the following code:

<div id='footer-wrapper'>

Once you find it, copy the following code below, and paste above code <div id='footer-wrapper'>.

<div id='footer2'>
<b:section class='footer' id='footer2'/>
</ div>

<div id='footer3'>
<b:section class='footer' id='footer3'/>
</ div>

<div id='footer4'>
<b:section class='footer' id='footer4'/>
</ div>

Then save your template and preview. If the column can not well-organized, the value of the width maybe too large. Please adjust.

Now, you have 1 original column and 3 new column.

Enjoy it!

Subscribe to receive free email updates: