Blog Tips:- How To Add Three Columns To Footer Section of Blog Templat

Look At The Bottom Of This Blog. your will find three extra columns at the footer section.This Is The Latest Style of Blogger Templates in Web 2.0 style Websites and Blogs. Many of The New Template Designers are making a Inbuilt widget for the same in their new templates but in older we have to add this widget by editing our blog template. Its Easy to do just in few minutes we will be ready with our new template look which have three new footer columns.

1. Backup
First before we begin with template editing we must have to take Back up of your blog b blog template. This is for our safety.To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.

2. Move Widgets In Footer Section
Move all existing widgets from the existing footer section.In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.

3.Editing Template For Adding Code Of Footer
Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

Now you need to find this section in your template:

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

Please note this code may vary from template to template some have "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section.

Replace the entire line highlighted in red with the code below:

<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>

Now First Save your Template At This Stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.

4.Adding style for the new footer section

Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.

Immediately before this line, add the following lines of code:

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

And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

We have Finished Our Work , now go to the layout section of blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!.