Skip to main content

How To Add a Three Column Blog Footer

Are you worried of your sidebar full of ads? overstuff?  well, maybe it’s time to add a footer to your blog. I will teach you how to install a three-column footer.

How To Add a Three Column Blog Footer
Login to your Blogger account (if you haven't done so already).
Go to Template > Edit HTML.
Back up your template.
Look for the existing footer code near the end of your HTML. It might look something like this:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
if you already have contents in the footer, the code should be longer.

Copy and paste the code below immediately under the footer</div>. This code will create 3 new gadget containers (one for each column) under the existing footer container.

<!-- three column footer HTML Start by theblogger911.blogspot.com -->
<div id='new-footer-wrapper'>
<div id='column1-wrapper'> 
<b:section class='new-footer' id='new-footer1' preferred='yes'/>
</div>

<div id='column2-wrapper'> 
<b:section class='new-footer' id='new-footer2' preferred='yes'/>
</div>

<div id='column3-wrapper'> 
<b:section class='new-footer' id='new-footer3' preferred='yes'/>
</div> 
<div style='clear: both;'/>
</div>
<!-- three column footer HTML End -->
Copy the code below and paste it in CSS section, before ]]></b:skin>.
/* three column footer CSS Start by theblogger911.blogspot.com */
#new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;} 
#column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}  
.new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;} 
.new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
.new-footer .widget-content { padding: 0px 5px 5px 5px; } 
.new-footer ul { list-style-type:square; margin-left:15px; }
/* three column footer CSS End by theblogger911.blogspot.com */
Save the template and go to Layout. You should have the 3 empty footer containers added at the bottom of the layout.

How To Add a Three Column Blog Footer
You can now drag and drop the gadgets from the existing footer or sidebars into the new footer containers. 

If the columns are not distributed evenly, try adjusting the width in line 3 and right margin  of CSS code
Once satisfied with the result, if you want you can go back to the old footer code  delete footer wrapper (from <div until</div>).

Comment below for inquiries


Comments

  1. Once again your posts came to my rescue. thanks for the codes worked like a charm. even though in layout it stays the same but inside blog it works perfectly.

    ReplyDelete
  2. @Anu thanks for droppping by, I'm always posting articles that i think will be useful to others..BTW your blog is good..with great contents..

    ReplyDelete
  3. thanks for this a great help

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Add HTML Contact Form for Blogger Blogs

Our problem in creating a contact form is that you don't want third party contact form cause it will burden your loading page and if you want to give your reader an instant contact form but don't want to show your email, this HTML form will help you with your problem

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".

Now Select "HTML/Java Sricpt"

3.Copy and Paste below code into it.
<FORM action="mailto:[email protected]" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" s…

High PageRank Do-Follow Forums List (606)

Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

Here are the list enjoy

ForumPR1http://www.addthis.com/forum92http://chronicle.com/forums/83http://forums.myspace.com/84http://forum.joomla.org85http://forums.cpanel.net86http://forum.siteground.com87http://c7y-bb.phparchitect.com88http://forum.meebo.com89http://forums.mysql.com/710http://f…

How to Add Random Post Widget to blogger Blogs

Instead of creating new post everyday to reduce your bounce rate, many respected bloggers are suggesting to sell your old posts to readers. We all know that many of our posts are useful even time passed. today I am going to make a tutorial on how to add a beautiful random post and reduce your bounce rate also to promote your older posts

Hows Random Posts.
Doesn’t add load to your page loading
Shows the Name Of The Author.
Shows the number of comments.
Summary Showing Enabled.
CSS Added.
Hover effect for images. Installing It On Your Blog Go to blogger > Open layout tab
Now Add A new HTML/JavaScript widgetGive any title you want [ eg: Being Viewed, Recently Viewed, Now Viewing etc. Its up to you. ].
Now paste the code given below :  <style type="text/css"> .recent_post_content{width:100%;} .recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;} .recent_post_content img {width:45px;height:45px;background-position: center;margin:7px;padding: 2px;border:#888 solid th…