How to Divide Your Footer in Three Coloums - Solution

Division of the blogger footer (Most Lower part of a blog) in to three columns is not a very difficult task. In this post I will show you How to divide your blogger template footer in to three columns.

With the development of blogger templates, requirement of this blogger trick has got less value than previous. But still some people trying to divide their blogger footer in to several columns because all the templates have not provided this option. On the other hand dividing blogger footer in to two columns provides more space and a better arrangement to a blog.

Look at the following screenshot of this blogger trick;-)

Let me explain the process:

1. Go to your DASHBOARD >> DESIGN >> EDIT HTML

2. Then Download your existing template to your computer. (If you faced any problem during this process you can restore your blog with your older template by uploading this file back)

3. Now Press CTRL + F and look for the following code (some templates have slightly different code to the following code. So check it carefully

<div id='footer'>

4. Sometimes this code may be similar to the following code

 <div id=’footer-wrapper’>

<b:section class=’footer’ id=’footer’/>

</div>

5. If the code is similar to step 3 code just paste the following code just below the code you searched in step 3 If the code is similar to the code in step 4 just replace the red colored part of the code with the following code.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

<p>

<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>

</div>

<div style='clear:both;'/>

</div>

 6. Now again press CTRL + F on your key board and search for following code

]]></b:skin>


7. Then copy and paste the following code just above the code you searched in step 6.

#footer-column-container {

clear:both;

}

.footer-column {

padding: 10px;

}

8. Now save your template and go to your Page Elements page. Now you will see three columns at the bottom of your page.

That’s all. Now you can divide your blogger footer in to 3 columns.

Please share your opinion on this. Don’t forget to share this with your friends. Happy Blogging..!!