Add footer area in Blogger

Footer is a very important part of a blog or website, but Normally blogger templates come without footer which makes the widget area limited in some stance. Let’s say you want to add a facebook likebox somewhere and you don’t have any space left in the sidebar, then putting your facebook fan page like button in footer will be a good choice.

So adding a footer in your template will give you more independence to put more widget on your blog. This will also help you to enhance your blog’s beauty. Today we will learn that how we can install a footer area in blogger.

To install footer in your blogger template, just follow the procedure which is given below:

First go to Blogger>>Your Blog Dashboard>>Template>>Edit Template, Now search for ‘]]></b:skin>’ tag and just before it paste the code which is given below:

[php]#footer {
border-top:1px solid black;
clear:both;
margin:0 auto;
}[/php]

Now search for this code: ‘<div class=’clear’> </div>’, make sure that you are choosing the div element which is just after sidebar section.

Once you have find the above mentioned code, paste the below given code just after it:

[php]

<div id=’footer-wrapper’>
<b:section class=’footer’ <b><i>id=’footer'</i></b> maxwidgets=’10’ showaddelement=’yes’>
</b:section></div>

[/php]

Add a 3 column footer in your template

Now if you want to add a three column footer in your template, then you need to replace the code which you first added, for instance replace this code:

[php]

<div id=’footer-wrapper’>
<b:section class=’footer’ <b><i>id=’footer'</i></b> maxwidgets=’10’ showaddelement=’yes’>
</b:section></div>

[/php]

with this new code:

[php]

<div id=’footer-widgets-container’>
<div id=’footer-widgets-containerback’>
<div class=’clearfix’ id=’footer-widgets’>
<div class=’footer-widget-box’>
<ul class=’widget-container’>
<li>
<b:section class=’footersec’ id=’footersec1′ showaddelement=’yes’>
<b:widget id=’HTML15′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
<div class=’footer-widget-box’>
<ul class=’widget-container’>
<li>
<b:section class=’footersec’ id=’footersec2′ showaddelement=’yes’>
<b:widget id=’HTML14′ locked=’false’ title=’Gallery’ type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
<div class=’footer-widget-box footer-widget-box-last’>
<ul class=’widget-container’>
<li>
<b:section class=’footersec’ id=’footersec3′ showaddelement=’yes’>
<b:widget id=’HTML13′ locked=’false’ title=’About’ type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style=’clear:both;’/>

[/php]

Now design your footer section with CSS, for this paste the below given code just before ]]</b:skin> tag:

[php]

#footer-widgets {
padding: 20px 0 0 0;
}
.footer-widget-box {
width: 300px;
float: left;
margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
color: #374142;
}
#footer-widgets h2 {
font-family: inherit;
text-shadow: none;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
border-bottom: 4px solid #444444;
padding-bottom: 10px;
}
#footer-widgets .widget ul {
list-style-type: none;
list-style: none;
margin: 0px;
padding: 0px;
}
#footer-widgets .widget ul li {
padding: 0 0 9px 0;
margin: 0 0 8px 0;
}
#footer-widgets-containerback {
width: 980px;
margin: auto;
}
#footer-widgets-container {
background: #484848;
border-top: 10px solid #66b381;
}
.footersec {
color: #A1A6AF;
font-size: 13px;
line-height: 18px;
}
.footersec .widget {
margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

[/php]

Final Words

If you have done everything correctly then your footer must appear on your template. However, if you have any further queries then please let me know in comments. Stay tuned for more.