How to Create Four Column Footer Section in Blogger/blogspot

F rom this tutorial you will be able to add four column to your blogger footer in easy steps. You can see the live demo at the bottom of this blog, i have four columns in the footer section. By adding extra columns at the footer, you will save some space in sidebar and also upload time of your blog.

I searched for ‘creating four column footer for blogger’ in internet, but found nothing. So i come across some tutorials on ‘creating 3 column footer’ and modified them to ‘four column footer’.
+/- Continue Reading- Creating four column footer section in Blogger
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

Follow @pyblogger

Share This Post.....

Subscribe via Email :