Sunday, June 26, 2011

How to add 3/4 column Footer to your Blogspot blog


How to add 3 /4 Column Footer to your Blog

Most of the blog Template have 3 column /4 column footer.Some of them not.If you want to add 3/4 column footer in your blog.Just look here


1.Design--->Edit HTML

Expand Widget Templates

2.Copy this code.


<!--3 column footer-->
<div id='footer11'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


You can change this footer11 to anything.

footer11 is a variable name .if you change footer11 to anything you must change #footer11 also

variable name div id='name' , #name
You must change both with same name
Explanation:30%,40%,30% means we divide our blog width horizontally in 3:4:3 ration
if we have 100px the our each footer have 30px 40px 30px width

We can simply convert to a 2 column by deleting one.Then change 30% to 50% (both).
Also can convert to a 4 column template by adding one
Examples

2 column
<!--2 column footer-->
<div id='footer11'>
<div id='footer1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>


4 column


<!--4 column footer-->
<div id='footer11'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll3' preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column2' id='coll3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>




3.Place this code below

<div id=’footer-wrapper’>

<b:section class=’footer’ id=’footer’/>

</div>



Or Replace it with copied code.Or Place copied code at the end of Template code.

4.Add this code before ]]></b:skin>


#footer11
{
font-size:12px;
clear: both;

color:#ffffff;


padding: 10px 5px 5px 5px;
border: 1px solid #ddd;
background:#5C757D;
}
#footer11 a { color:#AEC5CE;
font-weight:bold;}
#footer11 h2 {
font-style: normal !important;

font-size: 14px;
font-weight:bold;
text-transform: uppercase;
line-height: 20px;
padding-bottom: 0;
background: #8A9DA5;
color: #FFF;
padding: 5px;
}





#footer11

background:color of the footer background;
color:color of the text;
font:font of the text
font-weight:bold-->text to bold

#footer11 h2

Your Heading

text-transform :upper case -->Transforming all text to upper case

#footer11 a

Css styling of your links
text-decoration:none --->No underline


Preview




Get 10-50% offer on all purchace - Flipkart offer zone

6 comments:

sibin777 said...

Hi,Friends this is one of the best way to add footer columns.Some professional blogger templates come without footer column.Customize it,make it a unique one

Ahsanul Karim said...

You have added detailed description. I'll try in one of my blogger site now. 

tom said...

really good work. I will try it with my blog http://myfitnesbook.blogspot.com having bloggermint2 template. Thanks for good sharing. Keep it up.

larry said...

very easy method you shown to add footer.

shally said...

you r simply genious. Thanks

waseem said...

thanks, i have tried your method and implemented easily. Thanks

 

Copyright @ 2013 7CHIP.

Designed by Templateify & Sponsored By Twigplay