How To Add a Three Column Blog Footer

| , , ,

Are you worried of your sidebar full of ads? overstuff?  well, maybe it’s time to add a footer to your blog. I will teach you how to install a three-column footer.

How To Add a Three Column Blog Footer

Login to your Blogger account (if you haven’t done so already).
Go to Template > Edit HTML.
Back up your template.
Look for the existing footer code near the end of your HTML. It might look something like this:

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

if you already have contents in the footer, the code should be longer.

Copy and paste the code below immediately under the footer</div>. This code will create 3 new gadget containers (one for each column) under the existing footer container.

<!-- three column footer HTML Start by -->
<div id='new-footer-wrapper'>
<div id='column1-wrapper'>
<b:section class='new-footer' id='new-footer1' preferred='yes'/>

<div id='column2-wrapper'>
<b:section class='new-footer' id='new-footer2' preferred='yes'/>

<div id='column3-wrapper'>
<b:section class='new-footer' id='new-footer3' preferred='yes'/>
<div style='clear: both;'/>
<!-- three column footer HTML End -->

Copy the code below and paste it in CSS section, before ]]></b:skin>.

/* three column footer CSS Start by */
#new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px 10px 0;}
#column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}
.new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}
.new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
.new-footer .widget-content { padding: 0px 5px 5px 5px; }
.new-footer ul { list-style-type:square; margin-left:15px; }
/* three column footer CSS End by */

Save the template and go to Layout. You should have the 3 empty footer containers added at the bottom of the layout.

How To Add a Three Column Blog Footer

You can now drag and drop the gadgets from the existing footer or sidebars into the new footer containers. 

If the columns are not distributed evenly, try adjusting the width in line 3 and right margin  of CSS code
Once satisfied with the result, if you want you can go back to the old footer code  delete footer wrapper (from <div until</div>).

Comment below for inquiries


How to Put Any Widget Inside Scroll Box for Blogger Blogs

How to Setup Your Feeds Through Feedburner for Blogger Blogs


3 thoughts on “How To Add a Three Column Blog Footer”

  1. Once again your posts came to my rescue. thanks for the codes worked like a charm. even though in layout it stays the same but inside blog it works perfectly.

  2. @Anu thanks for droppping by, I'm always posting articles that i think will be useful to others..BTW your blog is good..with great contents..

Comments are closed.