Create Four Column Footer Section Instead Of Three Column In Blogger Blog

As You All Know That blogger is allow only Three Column Footer Section so i am coming with another hack To Creat four column footer section so you can add many widgets

Steps You Need to Add 4 Column Section at the Bottom of the Blogger

Step 1. Login to your Blogger Dashboard

Step 2. Go to Layout >> Edit HTML , do not check the “expand widget templates” box. This will simplifies the process

Step 3. Back up your existing blogger template (Click on ‘Download Full Template’ to Back up)

Step 4. Now search these line of codes or similar ( footer-wrap, footer, footer-end etc… )

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

Step 5. Replace section code in red with below 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='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>

Step 6. Now you need to add CSS for these section, add below CSS code right above ]]></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://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;}

Step 7. Preview and Save your template. Now you will have four column at footer section

KEEP VISITING

Subscribe via Email

Comments

dudiari says
May 28, 2010 at 9:40 am
thanks alot that info
Ritesh Sanap says
May 28, 2010 at 12:11 pm
you are most welcomed
smile says
February 17, 2011 at 9:52 pm
Thank a lot brother…You are Genius!!
- Ritesh Sanap says
  February 18, 2011 at 1:34 pm
  Thank you buddy , I m extremely Happy that you found it useful , I m not genius but their a some sort of smartness :P
Tay823 says
June 19, 2011 at 11:57 pm
Thanks a lot this is exactly what I was looking for. One question, how do I change the background color of the footer??
Thanks again!
- Ritesh Sanap says
  June 20, 2011 at 11:15 am
  Just edit the CSS of #footer-column-container to get the desired results
  - Tay823 says
    June 20, 2011 at 9:52 pm
    aright thank you for your help :D
    - Ritesh Sanap says
      June 20, 2011 at 9:53 pm
      No Problem if you need anything else just contact me