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 {Next find this code:
clear:both;
}
.footer-column {
padding: 10px;
}
.footer-bottom {
padding: 10px;
}
<div id='footer-wrapper'>Replace <b:section class='footer' id='footer'/> with this code:
<b:section class='footer' id='footer'/>
</div>
<div id='footer-column-container'>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.
<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>
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!!!
Labels:
Blogger Beta,
Design,
Footer,
Widgets
25 Comments:
Thanks,I will try it out.
Question:
s there any way the font size of the footer section can be set differently from the general font size. It is customary to have the font size in footers set smaller than the universal font size. I hope I am not asking for too much.
Thanks.
I fiddle with my template a lot and I may try this. One thing I'm hoping to do is to fit a widget in between my first and second posts, but from all accounts that's not possible. However, putting adsense in between posts is possible. How's that?
@omodudu, There are a couple of ways. Add this to your /* Variable definitions:
<Variable name="footerfont" description="Footer Font"
type="font"
default="normal normal 50% Georgia, Serif" value="normal normal 50% Trebuchet, Trebuchet MS, Arial, sans-serif">
Then add:
font: $footerfont;
to-->
#footer-column-container {
clear:both;
}
I think that should do it. Play with the 50% to get it to the size you want. This is just off the top of my head, not tested, so save your template before beginning.
The above method will change all the font in the footer. If you only want to change a section of the text in the footer, do this:
<span style="font-size:78%;">THIS IS YOUR TEXT</span>
Once again adjusting the percentage until you get the desired effect.
@deb, that is an excellent question. I will have to look it to that. Seems like you would be able to place a widget since you can put adsense between posts. hmmmmmmmmm....
Did not quite work. I ran into a problem at step two. My code wasn't quite like yours, it appeard to have a nested HTML code. Do you take all of that out or leave it?
Sounds neat. I did the 3 columns on my from the same place and moved my slow loaders down there to try and speed things up too.
BTW in the time that it took me to land here and read the post I'm still waiting for the cellar to load thanks to Amazon. ;0)
@Omodudu, I'm going to have to set up a practice blog with your template (Denim) in it to see how it works.
MrBrownThumb, I've had this set up like for a couple of days, watching to see how it runs. It has been fine. Now today, Amazon goes at a snails pace, lol.
I was wrong per my earlier comment. Its just a wrong html tag issue. It isn't working yet but I'd keep trying. Thanks.
Hello Annie. Good tip one more time on Blog-U but one footer section is enough for me. Don't you think you have too widgets which are not essentials at all ? Like clustr map, and reader community. And also you have TOO blogrolls : 17 precisely !!!
Do you think you needs all of them ? And the Blogger play, do you think your visitors come on Blog-U to see it ?
@16 Them All, Each blogger has different needs and a different vision. My blog is more or less an example of what you can do in a blog with instructions on carrying out that vision.
No, I don't need all 7 blogrolls, but I enjoy them. Same for the Cluster Map. I enjoy that. The reader's community is probably a passing fancy...I don't know yet. And I love Blogger Play.
I just have fun with BlogU!
When I first implemented this, I was getting an error about unclosed b:widget tags. This did not make sense since I copied directly, and all the widget tags were closed with a backslash at the end.
I tried renaming the id. Eventually I got it to work only after removing all the lines that started with this:
b:widget id='HTML1...
It works now fine and I can drag and drop new elements to each footer section. Just dropping a note incase others have the same issue.
@johnf, thanks for your input. I always welcome comments where it didn't work for you, but with a few changes, you got the code to work.
Each blog template is different. We have to adapt and overcome!!
Dear annie,
Thank you so much for beautiful you work. I used it in my blog: Macam-macam
:)
Help please!
Wow I love this so much but I need help!! please please....okay first off. heres my template
http://freetemplates.blogspot.com/search/label/3%20Column%20Blogger%20Template
I use the template called New Blogger Template 3 Column : Nyoba 780
its the second one from the top.
now my prob is I cant find the stuff on it you have here. I downloaded this template from the site I just gave you, maybe you can email me with all the information on how to fix it so it works with the footer you have.
I thank you and everyone who can help me.
Hello,
Thanks for all your kind counsil about blogspot.
I try to integret a footer section like you show us. I'm actuelly using this template
http://typoxp.blogspot.com/
but there is now way to integret it there on it.
Do u have some counsil for me ?
Thanks
Zack
hello, thank you for this, i've been having a hard time adding it to my blog, and so i might take hours doing so.. hehe..
i just want to ask if you have a hack about changing the behavior of 'Post a Comment' in the footer.. can you just make it into a peek-a-boo style, so when i click on it, instead of opening another page or a popup, the comments will just appear as a peek-a-boo..
This has been very helpful Annie. Thank you! However, I had to tweak your code a bit since the editor was showing unclosed div errors. There was also a missing apostrophe after html2 in your code (I don't know if it affects anything).
I also wanna know, is it possible to assign a different background image to each widget?
@Gelo, I will look into the footer problem.
And I don't know about the widget question. I will put that on my list.
@Gelo, I fixed the coding problem. Thanks for bringing it to my attention.
This worked for me before but this time it is saying I have to close a div tag. I don't see any that could be a problem.
Seems Blogger has been getting fussy about div tags lately. Even having an extra space was a problem where there hadn't been a problem before.
@Laura, did you get it to work? Seems someone else had the same problem. Odd. It is the code in my template and it didn't have that problem.
It works fine Annie. I have set it up for the second time now. Went without a hitch this time. If you figure out how to fix the font in the footer that would be great. I have fixed it before but will have to read some CSS to remember what I did. I don't like how it comes out all in capitals.
I've been redoing my template today. Just want to finish up for the night. Used a lot of your tutorials here to get it all done. Thank you. :)
This is cool.I made it.See my blog.I feel its so convincing.I got rid of an ageful footer layer from my template.Actually i did change it.Thank you so much.
Nice article. I'm not really that familiar with blogspot, ever try wordpress! =D
In any case, here's a little tip with styles. You have
#footer-column-container {
clear:both;
}
What you can actually do is add a class called .clr or .clear
.clr { clear:both: }
Then instead of adding div style="clear:both" you can just add the class "clr" =)
You also don't need the additional div style='clear:both;' underneath the containing div.
=) hope that helps a little
Thank you for the useful information. This is by far the best footer-code I found, I think I will try to use parts of it - many of the wp footers i tried are not that good...