Saturday, April 18, 2009

How to Make 3 Columns Blog Footer

Blog-How to Tricks today will give blog tricks to make 3 columns footer. Footer is located at the bottom of the blog. In the default blog template, footer only 1 column.

For a variety of needs, sometimes we need a blog with 3 columns footer.

How to make footer to be 3 columns?

First, select the 'Layout' - 'Page Element'.

Then, please go to the menu 'Edit HTML'. We should do is find out how long the entire footer. Footer length generally equal to the length of outer. To find out, please friend search the following code:

(Some template may have a different code).

#outer-wrapper {
background-color: #473624;
border: 1px solid #332A24;
width: 9oopx;
margin: 0px auto;
padding: 15px;
text-align: center;
font: $ bodyFont;
}

Value on the width is the same as the length of footer.

Then copy code below :

#footer2 {
clear: both;
float:left;
padding-right: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer3 {
float:right;
padding-left: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer4 {
float:right;
padding-left: 0;
width: 296px;
background:#ffffff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Paste above code #footer or #footer-wrapper

Value on the 'width' is the value for the width of each column. Adjust the width of the columns at the original column.

For example, if the width of original column is 900px. For new 3 columns, make width each column 295px.

When finished, search the following code:

<div id='footer-wrapper'>


Once you find it, copy the following code below, and paste above code <div id='footer-wrapper'>.

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

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

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


Then save your template and preview. If the column can not well-organized, the value of the width maybe too large. Please adjust.

Now, you have 1 original column and 3 new column.

Enjoy it!

6 comments:

mohamed kamal said...

thanks very very much its nice information

Vijay said...

hai..This is my first comment on your blog..I didn get any words to say rather reading your posts of a whole..Your blog is too informative..nice attempt..Keep up your good work..I often will visit this blog..cheers..

visit this once you get time (holds much intriguing useful computer tweaks) : http://digital-mirror.blogspot.com

http://templates-widgets.blogspot.com/ said...

how to show html code as yours ant tips??plz help me...sick pf his....reply in my blog templates-widgets.blogspot.com

alvi said...

thanks about this information,,can you blogwalking in my blog,,thanks before!!

Rachat de credit said...

Thank you so much it is a great guide, now to make 3 columns blog footer is definitely simple and easy with your recommendation. Thank you

Anz Joy said...

Thank you so much it is a great guide, now to make 3 columns blog footer is definitely simple and easy with your recommendation. Thank you

Blogger widgets and premium templates

Post a Comment

 

© Newpaper Template Copyright by Blog - How to Tricks | Template by Fanchon0706 | Blog Trick at EasyBlogTrick