As you can see at the bottom of this blog, I have three columns in the footer section, followed by a wide section which I use to feature the main blog links. This style is fast becoming common in Web 2.0 style websites and blogs, and is quite easy to duplicate in Blogger templates. In this tutorial, I will explain how you can add these extra columns to your own Blogger blogs.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
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:<div id='footer-wrapper'>
<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 red.
Replace the entire line highlighted in red with the code below:
It 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 {
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.
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.
If you enjoyed this tutorial, please consider subscribing for future updates.
Technorati Tags: blogger | template | hack | footer-section | web+2.0 | blog+design
37 comments:
@Titisan Dewa
simply change the widget's id with different numbers. ex : there are widget1 and widget1, change one of them, so there are widget100 and widget1
cmiiw
--
@Amanda
i've succeed aplied this hack but then i got some problems, the space between the 3 footer column with the lower footer section is just too big. can you/someone help me how to fix it?
this my dummny blog's url : http://jempolkebo.blogspot.com/
Great work as usual Amanda!!
great info..
Hi...Thank you so much for sharing this very nice idea...i tried adding it on my layout and i was really satisfied with the result...happy day! and more blessing to you....you ish a gift to everyone...-smiles-
Amanda!!
You don't know how much you just helped me. It works like magic in my test blog. I'll soon implement it in my blog soon. Thanks.
Thank you amanda...i have try it, but a little change from above code.
thanks a lot
u rock amanda
Really very very nice site
also visit www.crackznhackz.blogspot.com
Hi Amanda,
I would like to try this one but I cannot see the image in item no. 3 showing the codes.
Hope you can fix this. Thanks for this wonderful tutorial.
Finally, i managed to success doing this tutorial ^_^
how can i change its background colour of our footer . Like you have put your bg colour as brown.
any idea . my blog url is idea-for-u.blogspot.com
ohhh Amanda, the 3th step is out (Service Temporarily Unavailable)
WOW, Amanda You are Amazing, Really you are great.
BUT, Unfortunately, I was not able to add it.
I tried a lot to do it. and every time it tells me:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
And;
I don't have any widgets in the footer section.
I Selected All the code by using "Ctrl + A"
And Copied It By "Ctrl + C"
Also Past It By "Ctrl + V"
Hope You Help me Amanda
And Thanks So So So Much.
GREAT POST AMANDA WAS REALLY USE FOR ME
BUT HOW CAN I ADD SOME COLOR TO THIS?
thanks. i did it at last. informative unlike other post. thanks. http://classicalentertainment.blogspot.com see the result.
And... how can we do this to the header? Ex, like this template of FalconHive:
http://falconhive.com/2009/04/blogger-template-business-talk/
The labels after each post disappeared even if I clicked it on the blog posts. The labels are still in my sidebar though. I think it has something to do with the 3-column footer. Please help! Thanks.
Is it possible to do this for the header?
the 3th step is out (Service Temporarily Unavailable)!!T_____T
D:
omg it worked perfectly!!!!!!! now Im off to figure out how to add an image background to my footer.
Hi Amanda,
Me again! Have just read through these comments and was wondering if the 3 column code can be used to make 2 columns for widgets by changing the percentage to 50% and 50%, forcing the last column to drop below? If not, is there another way to get a 2 column footer?
Hi again Amanda, I had a go at splitting the percentage between footer 2 and footer 3, and it works a treat, footer 4 has been pushed to the bottom, and photos/widgets are centered in f4, which is an added bonus!
Just want to say a big thank you for all the cool tips your site has provided me in the last month or so, this is my first attempt at building a blog and editing HTML, and although it still needs some work (too many ads), I'm more than happy with the results, would love your opinion if you have time?
Thanks again,
David http://toptravelgear.blogspot.com/
U r just awsome......................U R BLOGGER GODDESSSSSSSSSSSSSSSS>>>>>>>>>>>
you fu@*ing ROCK! Thanks for all these awesome posts!
thanks...it's fantastic :D
how to add color in the 3 colounm footer
Thanks for the tutorial :)
I've a widgeted footer too..
you are the greek Goddess of awesome! thank you very much!! love all your latest templates as well :))
Thanks for the tutorial, thats so nice, now my footer is 3 coloumns
thanks so much!
Thanks.I am going to implement this soon.If I want to add two columns instead of three,what should be changed or modified ?
cnetworld.blogspot.com
Hi Amanda!
Thanks for your post. It has helped me quite a lot.
I am trying to setup a about six columns of ten hyperlinks per column going across the bottom of the page. I tried doing that with your code by inserting more div columns, but they were getting squished. So eventually, I settled on 2 columns with the correct spacing and padding. Is there a any way of copying the two columns twice to get the six?
Thanks in advance.
nice work but i want to add a background please help me
thanks
how to divide html widget like footer
Thank you very much ...nice post ...
doesn't work with me :( check out http://dunkdaft.blogspot.com whts wrong with the template?
p.s. please change comment layout to popup version.
Finally i've found what i've been looking for in a long time.
Infortunately, the code page is offline.
Is it really temporary?
I would like very much to try it as soon as i can.
Thanks
(great, great blog, Congrats!)
Post a Comment