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




Labels: , , ,