A New Footer Section

After deciding to stay with this template, I wanted to spruce it up a bit. One thing I hate is the speed of loading. My solution? I added a new Footer section, which I named the cellar. I got the idea from Amanda over at Blogger Buster. Then I added a twist or two of my own.

First, let me explain why this is a solution. I know what the slow loaders are on my blog. My blogrolls are horribly slow. As are my Amazon widgets, and Blogger Play. I'm not sure if Feedjit is or not, but I put it in the cellar anyway.

I have my blog arranged so the posts load first, then the sidebars, and my cellar loads last. So, unless you are a speed reader, by the time you reach the cellar, it is fully loaded. No waiting. No fuss. No muss.

My cellar is defined by a horizontal line with text across the top and a horizontal line across the bottom. This is how it appears on the Page Elements page.


Not only does it contain the 3 column area, it contains a full width column before and after the last horizontal line!

As always, it is a good idea to save your template before starting.

Now, add this code to the CSS sheet between <b:skin><![CDATA[/* and ]]></b:skin>:

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

Next find this code:

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

Replace <b:section class='footer' id='footer'/> with this code:

<div id='footer-column-container'>

<div style='clear:both;'/>

<p>
<center><b>{ <i>YOUR TEXT</i> }</b></center>
<hr align='center' color='#cccccc' width='90%'/>
</p>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-top' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>

<p>
<hr align='center' color='#cccccc' 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='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

You can name your footer here or remove this code if you don't want text. You can also change the color of the horizontal line.

Save your template. Depending on your blog, you may have to change some of the widgets from HTML1 to a different name...like HTML 15. Just depends upon what type of widgets you have in your blog. Remember you can always delete the widget and put in a different type later. This is just to get the code in place.

Now you have widgets out of the wazoo!!! I love widgets!!!!!!!

UPDATE:
04/09/08: Error fixed! Thanks for pointing out a problem, Gelo!!!