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

Sponsored Links

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.

Sponsored Links
Copyright 2011. All rights reserved.
artist photos