Flag This Hub

Add columns to Blogger Footer: How to Add Three Columns to Blogger Footer Section?

By

The default Blogger template has only one column footer. If you surfing Internet frequently, you will see that many websites and blogs has three column footer. This three column footer is becoming very popular and spreading rapidly in Web 2.0. It's quite easy to implement this type of three column footer in your Blogger template. Moreover, if you do so then you will see some of the good advantages like:

  • You will get enough valuable space for your widgets.
  • You can add/replace more gadgets/widgets.
  • You can rearrange all the gadgets/widgets.
  • If you place all the biggest gadgets at the footer section, the main content will be loaded faster.
  • It will also contribute your blog design as the modern Web 2.0.

This page contains information related to add three columns to your Blogger footer section.

Steps to add three columns to Blogger footer section

Follow the following steps to add three column to Blogger footer section:

Step 1: Back-up your existing blog

Before any type of modification of your blog template code, it's very essential to back-up your existing blog template. You may take backup only the template or the widgets (gadgets) only or you may take the complete back-up of your blogger blog. I already discussed the process of back-up in other pages. To know the process of back-up, you may follow the following pages:

Step 2: Remove all widgets (gadgets) from the footer section

Before doing any change of your Blogger template code, go to your blog's layout and just see whether there is any widget to the footer section. If there is any widget (gadget) then please remove them from the footer section. Alternately, you can drag-and-drop all the widgets form the footer section to anywhere (sidebars or below the main blog post etc.) to the template. After removing all the widgets from the footer, follow the following steps.

Step 3: Adding CSS code for the footer section

This section of code will be the definition of your blog's footer column. All these are used for all the columns design. In this page, I just mentioned the code of the footer columns. You may customize according to your wish by using several colors, lines etc. All these will be discussed in the next tutorial.

Now, go to your template code section. For details, How to find and edit blogspot template code?

Before adding CSS code to your blog footer, first find the following two lines of code:

You may use Ctrl + F key to find those texts in Firefox. Please, copy the following code and paste the code before the searched texts i.e. the code ]]></b:skin> </head>.

]]></b:skin>
</head>
/* 
	Code is developed by:  
		http://hubpages.com/_rt3/profile/blog 
	Blogspot Tutorial Index:
		http://hubpages.com/_rt3/hub/blog-index
	Code Description:  
		Codes for adding columns (3 columns) in the blogger footer section
*/

#footer-columns{
	border-top:1px dotted #999999;
	clear:both;
	margin:0 auto;
}

.column1{
	padding: 0px 5px 3px 5px;
	width: 30%;
	float: left;
	margin:3px;
	text-align: left;
}

.column2{
	padding: 0px 5px 3px 5px;
	width: 30%;
	float: left;
	margin:3px 3px 3px 5px;
	text-align: left;
}

.column3{
	padding: 0px 5px 3px 5px;
	width: 30%;
	float: right;
	margin:3px;
	text-align: left;
}

.addwidget {
	padding: 0 0 0 0;
}

#footer-columns ul {
	list-style:none;
	margin:0 0 0;
	padding:0 0 0;
}

#footer-columns li {
	margin:0;
	padding-top:0;
	padding-left:0;
	padding-bottom:.25em;
	padding-right:15px;
	text-indent:-15px;
	line-height:1.5em;
}

body#layout #footer-columns {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

body#layout .column1 {
	width: 32%;
	float: left;
}

body#layout .column2 {
	width: 32%;
	float: left;
}

body#layout .column3 {
	width: 32%;
	float: right;
}

Step 4: Add containers to hold all the footer columns

After adding CSS code, it's time to add the containers for the footer. To add container, first search the following code:

<b:section class='footer' id='footer'/>

Select the above line of code from your blog template and delete the entire line from the template code and paste the following lines of code there:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

Step 5: Save the modified template's work

After successfully finishing the above tasks, save the modified code by clicking Save Template button to save the whole modified code. Now, your blog has three columns in the footer section.

I think, you are successful and finished adding three columns in your blog footer section. If you face any difficulties then send your feedback in the comment section. I will try to solve your problem.

Live View

I already have implemented the above tutorial into a blog. The codes are exactly same and there is not medication inside the code. You may see the effect of three columns footer section, by following the following link:

Click here to see the live effect of this page tutorial.

© This tutorial is written by Blog.
For more blogspot tutorials, visit http://hubpages.com/hub/blog-index

rancidTaste's Recent Pages

blog's Recent Pages

Others are also reading...

Comments

maidul 2 years ago

Thanks for your nice post.I am searching like this post for a long time.

blog 2 years ago

Thanks for your comment. I think you may implement 3 column footers in your blog also. You may visit http://digital-link.blogspot.com/ blog, where this tutorial is nicely implemented.

kashif salman 2 years ago

this is a nice post. could you please also mention how to change color of the three coloum footer menu?

jor.G3/cantos 2 years ago

i tried it but i guess i did something wrong! the third colum [the one on the right] seems a lot wider than the other 2.

what i was really looking for is a way to add 4 columns into the footer [i.m willing to put there a long list of links.]

please! tell me how can i add one more & arrange the wide of the columns OR, if that isn.t posible, which are exactly the codes that i should erase to remove the three colums at the footer... stupid that it seems, i.m not being able to do that either! ,: s

thanks!

Asim 2 years ago

thanks dear it really helps me alot

izdelava spletnih strani 2 years ago

thanx it was really helpfull,

Angela Christenson 2 years ago

Hello, I just tried using this and it is giving me an error message when trying to complete the last part of this task. This is the error message that I'm receiving. 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 "

Please e-mail me with your thoughts to this problem. Thank you. luvmycat05@charter.net

violetkey 2 years ago

Thanks this is exactly what i needed!

Deb 2 years ago

Works great! Thank you so much for making it so easy!

saimoom 21 months ago

Helpful. Let me see. I will try it in my blog.

Thanks Admin.

http://saimoom.blogspot.com

http://shinemark.blogspot.com

izdelava internetne strani 19 months ago

Thank you for this tip, it saved me a lot of time!

Nimo23 18 months ago

I will implement this on my new blog template.

http://bennixcomputertips.blogspot.com/

eraz 18 months ago

Hithanx for shar its realy very help full but i have some problem wid my templete see de status after adding footer its working but style problem

plz send me solution in eraz783@gmail.com

essam 18 months ago

??? ?????? ???????

http://www.agd3as7ab.com/chat

Chat and Chat Mates

http://www.agd3as7ab.com/chat

exinco 14 months ago

thanks for the tutorial.its valuable for me

alex 13 months ago

your blog give me much knowledge about how to increasing my blog, thx

budi 4 months ago

Great Tutorial about widget blogger.. .

http://nitip-link.blogspot.com .... I Hope You Visit me

Thank You

globalwalyy 3 months ago

wao this is really interesting http://www.cashdove.com

JK 3 months ago

Hi! I like your comment form can you give a copy of this? Thanks.

meandme 2 months ago

thanks for this tutorial, i have just done it to my website here http://wwwhotnigerianews.com

Sandy 7 weeks ago

This was quite easy to add thanks :)

Sandy 7 weeks ago

Hello,

Thanks for the tutorial but I am having an issue. After applying the code in the layout the footer columns display correctly as columns but when I view the blog they display as rows, so instead of displaying widgets side by side they display one on top of the other.

http://sandystestblog2.blogspot.com/

Sandy

sterr004[at]gmail[dot]com

Sandy 6 weeks ago

Hello,

I don't know specifically what changes I made to my template but the issue I mentioned before is no longer an issue o.O and ^_^.

I have a question though. What if I only wanted to add two more footer columns instead of three? What changes to your code would I need to do? Thanks! And again awesome tutorial :)

Sandy

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    Like this Hub?
    working