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

Take a look at the before and after images below :

Before :

After :

Lets add 4 columns to your blog :

STEP1:

Log in to Blogger, go to "Layout" -> "Edit HTML"Now find this code:

]]></b:skin>

and immediately BEFORE/ABOVE it, paste this code:

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRXTOG4uFV8J0oCUy5V1D7SW4G11L_O0PTIexuGyXvEUaKQP84ijp8urgNue_sD51rRO9SbZkRmgo404xGoxWnzzhuVDu59huS6HV8bidSYTefAx0dSdGwkMpj9h9ss1k2CLBlXJRpdVu/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;}

STEP2:

Now search for the following code: 

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

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'/>

:section cla
</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<
bss='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; mar
<b:widget id='Text4' locked='false' title='Spice Up Your Blog 4 COLUMN' type=
'gin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
v>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section clas
<b:widget id='Text3' locked='false' title='Spice Up Your Blog 4 COLUMN' type='Text'/>
</b:section>
</d
is='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>

Now Click Save Template

Posted in: blogger,Guide,Tips,TRicks,web designing