Create Three Column in Blogger Footer



One of my reader asked how to Create Three Column in Blogger Footer as he had some problem in doing that. Now i will hold this tutorial to make three column easily. As if you want a three columns in your blogger template like others then you can have it now.

GO TO BLOGGER LAYOUT > EDIT /HTML

Now (Ctrl + F)Search for below codes,

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

After getting these codes just replace the red line with the following codes,


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

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

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

<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='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>


Now PREVIEW IT.

If No errors then proceed and add css part to it.

Find </b:skin> and place the below codes before it

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

And save Your Template now.

Now Go to Page elements you can see three column created in your footer above your main footer. I think you would love this hack.

56 comments:

cheth said...

Yea any contribution from your end will do great all i can say is thanks for sponsoring my contest i shall post the details soon :) It will be great to have you as a sponsor .. I will make sure my sponsors get some traffic from my contest and of course some more publicity :) Good luck! Have a good day :)

lvs said...

Excellent tip. I have a two column format for my blog but have always wanted a three column just for my footer. So far I had not succeeded. Now let me try using your tips.

Also I like the side menu feature that you have on your blog. It is something very useful for visitors to your site. I am enjoying navigating your site using it.

Anshul said...

ya sure i will have a post on it as early as my full blog design complete is complete..

AB said...

Thanks for this awesome tutorial....

Fashion Ivy said...

I am trying to create the 3 footer like you have on my site fashionivy.blogspot.com and its not coming up properly as i cant locate the exact code you have. Just wondering if you are able to help me

eeeian1 said...

thank u
i rate ur tutorial very high,bcoz i cud implement it very easily
and hack is very effective

Meuledor said...

Cool, nice hack!

Mith said...

it's not working on my blog.it's giving me error like there is mismatch of div tag not terminatedproperly.

Anshul said...

@mith It doesn't seem error i checked the codes

amprawin said...

thankz a lot!!!!!!! :D
great!!
do visit ok
www.cyberddl.co.cc

Anonymous said...

:)) Good

Pixel said...

Hi Friends,Very nice blog, very useful informations, thanks.

Taufik said...

hi...i got error...how to fix it??please :((

Anshul said...

hey buddy whats the error !!!

Taufik said...

after i paste the code, i cant save it..i dont know why :(

Anshul said...

its difficult to tell like ths friend,what error you are facing just go to edit html,expand widgets-then copy all codes from there in notepad and save it.Now upload this file and send me link to download i will install three column in it and send you.

Taufik said...

i change my template now..and i dont have footer-wrapper code at my html.....u can visit my blog to make sure if i can put footer or not...thnx for ur time

Anshul said...

Hi checked your template

See you have codes like these in your template

#footer{
clear: both;
float: left;
width: 925px;
height:88px;
background:url(http://s254.photobucket.com/albums/hh92/eblogtemplates/langit/langitfooter.jpg) no-repeat;
padding: 10px 0 0 0;
font-size:11px;
}

See it has background image to end the template design which ends definig template,because of this design style we cant add three column footer or even single footer becuse it effects it beauty.Thasts why author of this template also didn't defined the footer code for it.

Footer can still be added then it also expands the sidebar and all template beauty gets distorted.So will not rececomend to add in this design.Just there is one alternative to define three column at end of he template and i did it if you want it you can check this blog.

http://testinganother23.blogspot.com/

Taufik said...

hi Anshul i have problem with second step ..pasting code below b-skin...the show up at top of my header ...hows that?

Anshul said...

@ taufik just download your template codes from here in which three column widget is installed.
http://anshuldudeja55.googlepages.com/langit.xml

and upload it to your blogger as i cant help just as you there is problem in step 2.These problems can't be solved by just saying.

Just back up your blogger template and take all sidebat codes in notpad yso you can add later after uploading he design i gave.

If still you can do it in end i can say just give me your codes i will make it work and then you upload it.

I am ready to help all my readers in all way.

Reagrds anshul

Taufik said...

Thank you so much pal..really appreciate what u did...

maidulctg said...

in my templet it has following code
div id='footer-wrap1'div id='footer-wrap2'

After applying your code it shows error.Please help me.

Anshul said...

ya it can be depend on the your layout buddy just if you really wanna use three column footer then,just go to edit html,expand widgets-then copy all codes from there in notepad and save it.Now upload this file and send me link to download i will install three column in it and send you.

Steven said...

Hi Anshul, I cant find the code..can u take a look my blog...and tell me if i can put your footer code..?

Anshul said...

@ steven your blog template too will face same problem as i have said to taufk in above comments ,stil just download your template and send me the codes if it could be worked perfecly i will tell you.

chinna said...

i cant find that code in your blogger template like woork template.help me by sending mail to jayaraj.chinna@gmail.com or commenting in my blog jayarajyadav.blogspot.com

Anshul said...

@ chinna i would suggest not to use three column footer in this template as you can't add three footer in this as i said above bcz in this template no page elemnt is addded in footer section for this you need to change its css to add footer section.It will not look nice.

London Chow said...

Love it. Thanks very much indeed! Thought that it would be a hassle but managed to get it done all under 5 minutes. All thanks to your clear instructions.

Cheers,
C K

CyberRon said...

Hi Anshul -- can you refer me to a blog site that uses a three-column footer? I want to view it first before trying this hack. Thank you!

ayie said...

hai..i also had problem try change my template. can u help me. tthis my tempalte for download http://www.mazrimishar.com/myblog/mytemplate.zip tq

Anshul said...

@cyber you can see my design only having 3 column footer.

@ayie what you want to be done in your template.

RanaSpot said...

I want to add a left Column to my blog
how I can do that?

Anshul said...

@ranaspot indirectly u are asking me to explain how to design a blogger layout its impossible to explain here friend.

RanaSpot said...

hmmm
that's really sad ~_~`
how a bout u Doin' It For Me #_# PLEAS +_+
I tried so hard to do it by my self but I could not.

JohnPatra said...

i have problem.
when i preview it i have errors.
please help

jayaraj said...

can i add footer for my blogger template gamezine updated please because i cannot find the codes

Anshul said...

@jayaraj every template has its own code as i would say to add three columns in any design is possible but in some dsigns they are not designed like to add three columns and may distort the template look.

Mottobiz said...

Howdy Anshul- Hope you are in best of health.

Is it possible to add 3 column footer to langit blogger template? I tried it but the columns overlap the bottom wrapper corners.

Is there a way to get around this problem?

Thanks in advance,

Mottobiz

Anshul said...

@mottobiz ya it is possible to add in every template but every template has different codes and different desings and even some are designed in such a way that it may not look beautiful to add three coulmn to it. As i have explained here just basic codes keeping in mind the codes of blogger minima template,but umtin you dont know about codes you will not be able to add it to every template as every template define there own codes.

Mottobiz said...

Thanks Anshul for the prompt reply. I truly appreciate it. I tried out your other method (separate footer for langit) as described by you to someone else. It worked perfectly.

As you said, there is always a way!

Thanks a ton,

Mottobiz

Unity Bond said...

Hi Anshul. I can't even find the required codes in the first place.

I tried copy that code and replace the red one with the long one but it turns out an error saying TEXT2 - Widget ID must be unique. I tried with other word but still don't work out.

I have read other commenters above who experience the problem. So, do I have to download my template and send to u for editing? If so, I need your email then. Thanks. By the way, I followed your blog and bookmarked it. Look forward for more high quality content cause I tend to like simplicity in professionalism haha. Bye


Blog: http://unitybond.blogspot.com
E-mail: unitybond@gmail.com
RSS Feed: feed://unitybond.blogspot.com/feeds/posts/default
Twitter: http://twitter.com/unitybond
YouTube: http://youtube.com/unitybond
Nazir's Facebook: http://facebook.com/savethefish
Calvin's Facebook: http://facebook.com/calvinckf

Anshul said...

@uniy you can contct me at anshulaffprg[at]gmail.com

Blogger Nutshell said...

Hi Anshul ...I have wrote my own version of creating three column footer for blogger for fixed width templates ..Hope this post


http://bloggernutshell.blogspot.com/2009/08/how-to-create-three-column-footer-in.html

izdelava spletnih strani said...

i have only one column, must be doing it something wrong

Dawn Farias said...

This is perfect. Thank you!

Anonymous said...

:)

Cassie Lew said...

hi i got error when i wanna preview it,
it said
'We were unable to preview your template
Please correct the error below, and submit your template again.
More than one widget was found with id: Text2. Widget IDs should be unique.'

please help me =(

Anshul said...

@cassie you will find one more widget in your code with name Text2 thats why not adding just name it Text58 or any other unique number then it will get add.

h_8 said...

very easy and very thnx, it works !!

for other users, move all of the "widget" to the right side bar before, (cmiiw)correct me if I'm wrong

h_8 said...

very easy, very THNX, IT WORKS !!

for other users, move all the "widget" to the right side bar before editing
(cmiiw) correct me if I'm wrong

The Evil Genius said...

link to the blog
http://evilgeniuslabs.blogspot.com/

The Evil Genius said...

hey i have the "peacekeeper" theme which has a footer image... the following code :
#footer{
width:100%;
padding:10px 0px 20px 0px;
background:#1d1d1d url(http://1.bp.blogspot.com/_Z8F7gBEfQSU/TBPkV540s2I/AAAAAAAACHQ/XDgmOh4zbSY/s1600/footer.png) bottom no-repeat;
position:relative;
font-size:10px;
color:#6F7C7F;
height:73px;
}

the 2 columns get added to it but cause problems with the design...
can u tell me how i can extend it to bring the footer image BELOW the footer widgets?? plzz help me out

Anshul said...

@evil the tutorila is made just keeing in mind the simple defualt google template so to implement as it is will be difficult in all my custom templates.And i don't like bloggers like you helping out who remove all our credits from the templates and use them.

The Evil Genius said...

dude... chill ok... i dint mean to remove the credits... all i was trying to do is shift em down to ad the widgets... dey got removed in the process... sry if u felt offended... i'll put it back by reinstalling the theme

Post a Comment