Customize Footer Section with Three Columns

Footer Section is important for bloggers because this section visibility attract visitor so in this Customize Footer Section with Three Columns in a very tutorial lets start.

1.Log in to your Dashboard

2.Go to Layout

3.Then Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this

4.Replace the Code With:

<b:section class='footer' id='footer'/> of above code,with below 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>

5.Now find the </b:skin> tag in your template.

6.Immediately before above line, add the below lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

7.Click on "Save Templates" and Done.

8 comments on "Customize Footer Section with Three Columns"

This is DoFollow Blog Leave a Comment

abstract rugs on March 8, 2010 at 11:08 PM said...: This is great! I've looked for this before, I'm glad to see it seems easy enough for me to do!
frugal living on March 8, 2010 at 11:10 PM said...: My favorite blogger layout is the three column, I had never even thought about customizing the footer!
Seo Ranking Consulting on March 9, 2010 at 12:10 AM said...: Great script coding friends, ;) I will try that for my web blog, thx for sharing this trick
Car Shipping on March 9, 2010 at 1:53 AM said...: I prefer a two column layout, but this is really great advice as well :) Thanks for sharing!
coach factory stores on March 26, 2010 at 2:46 PM said...: Another great post! Just wanted to say that I always look forward to reading your blog.
Muhammad Wajid on March 30, 2010 at 1:59 AM said...: Thank you so much for very helpful and liking my post
tetovaze on May 25, 2010 at 3:35 PM said...: I hope this will help me i have only 2,6 page views per visitor.
Ecommerce Web Design on July 19, 2010 at 12:06 PM said...: Dude its not working on my blog....:(