Sunday, January 20, 2008
Adding extra columns to your 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 four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.Creating the new columns
Here are the four steps needed to transform the footer section of your blog template:
- Back up your existing blog template!
Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.
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. - 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. - Add extra code to your footer section.
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:
<b:section class='footer' id='footer'/>
</div>
Please note that this particular section may be called something slightly different in your template, eg: "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. In any case, all we need to change is the line highlighted in GREEN.
<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>
- is a good idea to 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.
- 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 {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.
clear:both;
}
.footer-column {
padding: 10px;
}
Now you have finished adding these new sections to your footer, go to the Layout section of your 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!
I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:
<hr align='center' color='#5d5d54' width='90%'/>If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.
If you would prefer to remove the line altogether, simply delete the whole line.
I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.
For Future Updates,Please Subscribe!
Labels: Blogger Hacks
Posts
