2009/04/30

Create 4 column footer

Yesterday , I published 1 tip to make 3 column on footer of your blog, now this tip , you will get 1 more column on your footer- 4 column.When you have these column, you will easily put some useful widgets, information ,tools for your visitors that they can easily read and understand your site , too.

This is the pic of 4 column footer's shape:

Now lets do this quickly :
1.Login your blogger account , then go to Layout > Edit HTML ( no need check expand widget templates).
2.One thing important , you should back up your template unless you are sure you will be successful when finish, if not , your template will be crash and you can not go back. So click Download full template.
3.Now find this code in your template and notice the red code:

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


Now replace the red code by all code below:

<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


Next , find ]]></b:skin> to add the CSS code ( important code to make the footer to be shown on your blog) before it:

#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}


Ok try to Save, if error , please check your template again, and add the code exactly it has to be placed.
If you still have problem , please leave me a comment , I will help you.
Have fun
Zen

9 comments:

Anonymous said...

yes! works perfect, thank you

Anonymous said...

No I Cant do it wat to do after replacing the red code plzz email me at manoj0072008@gmail.com

vuluganck said...

No I can do that , please patient
I have tried this code again on here you can check it and I have no error or any problem:

http://zentezt.blogspot.com/

Try again by your best , put the code in the right place , please.
If you still in trouble , i will mail to you

Genius24 said...

hmm it works fine in my blog http://genius24.blogspot.com

Anonymous said...

It worked perfectly the first time i tried it. Thanks again for this wonderful tip. Visit my blog at adesignac.blogspot.com to see results.

Atheist Ed said...

I can't make it work. I get "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 " as an error.

My blog is at http://lsrwashijacked.blogspot.com/ Thanks

Froggy said...

I got the same thing as Ed...the error code. :(

Kaushik said...

Works perfectly for my experimental blog @ www.kaushik.tk; the only thing I need to adjust is that bullet gif image. It's showing correctly in one column, while in another it's alignment seems to be disturbing somewhere.

CuisineHOUzz said...
This comment has been removed by the author.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.