August 13, 2011

How To Add Three Columns To Your Blogger Footer Section


Hey! Friends`are you know how to add 3 coulmns to your blogger footer section..many websites and blogs has three column footer.  footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design. there are only 6 steps to do this..this footer hack is specially for blogs that have different  widths and styles.ok..try this very easy tutorial.. i hope you like this blogger hack..thankyou..

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this






<div id='footer-wrapper'>

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

</div>

4.Replace the line <b:section class='footer' id='footer'/> of above code with below code

<div id='footer-column-container'>
<div id='footer2' 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='footer3' 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='footer4' 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;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


5.Now find the </b:skin> tag in your template

6.Immediately before above line, add the below lines of code

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


7.Now Save Templates,Your Are done

No comments:

Post a Comment