create your own

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

76
rate or flag this page

By blog


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

Comments

RSS for comments on this Hub

maidul  says:
5 months ago

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

blog profile image

blog  says:
5 months 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  says:
4 months ago

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

jor.G3/cantos  says:
2 months 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  says:
2 months ago

thanks dear it really helps me alot

Submit a Comment

Members and Guests

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


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working