How to make Three Column Footer Widget in Blogger

Discovering it hard to include widgets to your weblog without overstuffing the actual sidebar? Ahh nicely, maybe it’s time for you to add a footer for your blog. This guide will show you how to perform just that -install the three-column footer.

1. Sign in to your Blogger accounts (if you have not done so already).
2. Go to Theme >  Modify HTML. 
3. Regress to something easier your template.
4. Search for the existing footer program code near the end of the HTML. It might appear something like this:

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

in case you already have contents within the footer, the program code should be longer.

Duplicate and paste the actual code below instantly under the footer  </div>. This program code will create three new gadget storage containers (one for each column) under the existing footer container.

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

• Copy the actual code below as well as paste it within CSS section, prior to ]]> </b: skin>.

/* three column footer CSS Start */
#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 */

• savethe template as well as go to Layout. You ought to have the 3 vacant footer containers additional at the bottom of the design.

You can now drag as well as drop the gadget from the existing footer or sidebars in to the new footer storage containers. The end result should appear something like this.


When the columns are not dispersed evenly, try modifying the width in-line 3 and correct margin in line five of CSS program code (in step 6).
Once satisfied with the end result, if you want you can return to the old footer program code in step 4 as well as delete it (from  <div till  </div> ).