How To Add Three Column footer in Your Blog

Three Column Footer Widget

How To Add Three Column footer in Your Blog convert your blogger footer (blogspot blog footer)into a three column adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern “Web 2.0” appeal for your blog design and  you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first, there are only four main steps to this tutorial, and I’m sure you’ll agree that the overall process is quite simple.
I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.
This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns
See How To Add Gadget Inside Blogger Header Section 

Add Three Column Footer in Button Section of Blog

Here are the four steps needed to transform the footer section of your blog template:
Back up your existing blog template!
Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don’t like the new look, you can easily revert back to this design.
To back up your existing template, go to Template>>Edit HTML in your Blogger dashboard, and click on the “Download Full Template” link near the top of the page. You can then save your existing XML template file to your computer.

  • Go Layout >> Edit HTML
  • Now Find This code ]]></b:skin>
  • Copy the below code and past before this code ]]></b:skin>


#footer {
padding: 0px 0px 10px 0px;
width: 100%;
#footer-wrapper {
padding: 20px 0px 20px 0px;
width: 960px;


#footerbar-wrapper {
border:1px solid #DEDEDE;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;

.footerbar {margin: 0; padding: 0;}
.footerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;

.footerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;

.footerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;

  • Now Search </body> and past the below code before this code

<div id=’footer’>
<div id=’footer-wrapper’>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar1′ preferred=’yes’>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar2′ preferred=’yes’>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar3′ preferred=’yes’>
<div style=’clear: both;’/>
</div> </div>

  • background:#333434; Changing the six digit colour code will change the background colour of this widget.
  • width: 960px; This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
  • background:#fff; and width: 32%; is the background colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour of Title Headings
  • border-bottom:3px solid #0084ce; Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
  • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links

that’s all if you feel this customizable footer widget helped you then please share it with your friends


Leave a Reply