How to create four column blogger footer

In my older post i have told how to Create Three Column in blog Footer and today i am going to tell you how to make it four so you can make four columns in your blogger footer so that you can add page elements to four different columns in the footer as in the below image.





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 Ctrl+f ( footer-wrap, footer, footer-end etc

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

 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>  

 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;}



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


3 comments :

Anonymous said...

hey im a maldivian and i tried this trick its great i have done in my blog visit www.maldiviansafari.blogspot.com

Marshall said...

hey i have done it but the alignment is not fit could you help me.

Muhammad Jaffar Khalid said...

Add Four Column Widget to blogger

Get widget: http://knowledge333.blogspot.com/2013/12/blogger-four-columns-footer-with-css.html

Post a Comment