Add Four Columns To The Footer Section At The Bottom Of Your Blog




| 11 comments

Almost all the new blogger templates have three or four columns in the footer section.It's a great place to add more content to your blog.You can see in my footer section i have made full use of the 3 sections i use.You can add things like your hit counters, about me, links, ads whatever you like.

To see what are we changing take a look at my demo's blog for an example using the minima template : Click Here and scroll to the bottom of the page.You will see the footer has changed from one column to four column and i have put some random widgets in place.

Once you make the change your layout will also change so you can easily add and remove gadgets like in the images below :

Take a look at the before and after images below :

Before :


After :



Lets add 4 columns to your blog

Step 1. In your dashboard click ►►'Layou't ►►'Edit Html'

Find the following piece of code in your template :

(Click CTRL and F for a search bar to find code)
<b:section class='footer' id='footer'/>


Step 2. Replace the code you found with this code :

<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='Spice Up Your Blog 4 COLUMN' 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='Spice Up Your Blog 4 COLUMN' 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='Spice Up Your Blog 4 COLUMN' 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='Spice Up Your Blog 4 COLUMN' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


Step 3. Find this piece of code in your template :

]]></b:skin>


Step 4. Add this code Directly above or before ]]></b:skin>

#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://4.bp.blogspot.com/_rKG-ziTSNUQ/S0lIvwTxXfI/AAAAAAAAAnA/0--Nk6Q6v4g/s320/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;}

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Now save your template.

The four columns are added to your blog.When you go to your layout you will see four gadgets are already added with the title 'Spice Up Your Blog 4 COLUMN' you just remove them and add the gadgets you want.

Now you have all that extra room you could add a link to Spice Up Your Blog in your footer if you want, just use this link, thanks :
<a href="http://www.spiceupyourblog.com" target="_blank">I Spiced Up My Blog.</a>

OK what else can you add to your new footer section ?

Here is a list of gadgets and widgets on this blog that you could add : Click Here

Have you changed your footer ? let us know, and if you need more help as always just leave a comment.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

11 comments:

  1. Dude it's really a good blog for all bloggers.. and bunch of tricks really helpful..

    Just I'm following u...

    Hav a look at my blog...

    http://firyfriends.blogspot.com

    and follow me too....U'll like it..

    ReplyDelete
  2. Hi Singh,

    The code you couldnt find did not show up in the comment you will have to prase it Here or use the contact me form.

    I am glad to help you but i will have to delete your comment i do not allow keywords in your name or nickname.

    Paul.

    ReplyDelete
  3. hey i need thesis footer theme for blogger. I hv found one on a blog, but its fully HTML, there's no section created for adding widgets. Everytime if I need to change anything i have to edit the Html. Is there any way to create a section so that i can add a gadget directly from page elements???

    ReplyDelete
  4. Hello Paul,

    I can't seem to find in my html template codes :( please help

    ReplyDelete
  5. Hi Paul, I cant seem to find



    I'm using a custom theme, any help would be much appriciated

    ReplyDelete
  6. What about template that has no footer by default? How do i add the code?

    ReplyDelete
  7. I've putted footer,thank you.I couldn't find the code you gave us so i putted all new code randomly and it was ok,but now i can not change the collor behind footer if that is posible.Help please and thank you for your blog and all great stuff you are giving us.
    My page is
    http://besttripdestinations.blogspot.com/
    Thanks

    ReplyDelete
  8. Hi admin, I am not able to find this code in my blog. now wt should i do?

    ReplyDelete
  9. Thanks for share. Best tutorial of adding widget column

    ReplyDelete
  10. It works, there's no errors. Thankyou dude:)

    ReplyDelete
  11. Hi there!

    And if I want to take the footer out all together?! Is there a way to do that?
    Can you tell me how?

    Thanks

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us