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