add elemen footer - divide by 3 column

20 March 2010

Posted by gumbung on 10:18 AM

lots of widgets that available on the Internet. until running out of places to put it. well there's footer to fill it. how to add elements to the footer (bottom template) on your template? gumbung will discuss here simple and clearly. edit html.">first login at www.blogger.com then select layout > edit html. find this code: ]]></b:skin>

step 1 add this code above code: ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

will be like this

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
]]></b:skin>


step 2 look for the code below

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

or something like this

<div class='footer'>
</div>

add this code at above of it

click here :



<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div> <div style='clear:both;'/>
</div>


will be like this

click here :



<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div> <div style='clear:both;'/>
</div>

<div class='footer'>
</div>


or this

click here :



<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div> <div style='clear:both;'/>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>






and done, enjoy the new feature from your template blog