Add iii Column Footer Widget In Blogger Blogspot

Blog footer is the extra infinite at the bottom to add together to a greater extent than widgets.widgets are really of import for to a greater extent than exposure of your spider web log post.By default blogger template convey i column footer but only about blogger wishing to a greater extent than column to add together to a greater extent than gadget at footer.to add together 3 column footer nosotros convey to edit template.After editing template nosotros volition encounter to a greater extent than column at the bottom of template,then nosotros tin plough over the axe add together widgets similar contact us, label widget or others.

This is really unproblematic tutorial fifty-fifty blogger who non know much virtually coding tin plough over the axe easily modify their template but earlier editing template tin plough over the axe boot the bucket backup of blogger template.Now nosotros volition modify i column footer to 3 column.First nosotros volition add together pocket-sized code earlier closing torso in addition to thus nosotros volition add together peel for designing of the footer.Let kickoff the process, only follow the below steps.

How to add together 3 column footer inward blogger template

Step 1 Login to blogger work concern human relationship in addition to guide your blog

Step two Go to template in addition to edit template.

Step 3 Press ctrl+f in addition to Search below code

</body>

Step four Add below code earlier </body>

<div id='footer'>
<div id='footer-wrapper'>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol1' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol2' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Step v Now search for

]]></b:skin>

Step vi Paste the below code above ]]></b:skin>

/* ----- Footer Start ----- */#footer { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333434;}#footer-wrapper { margin:auto; padding: 20px 0px 20px 0px; width: 960px;}
#footercol-wrapper { background:#333434; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 32%; text-align: justify; font-size:100%; line-height: 1.5em; word-wrap: break-word; overflow: hidden; color:#fff;}
.footercol {margin: 0; padding: 0;}.footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}
.footercol h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: center; color:#fff; text-transform:uppercase; font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif; font-size:21px; border-bottom:2px enterprise #fff;}
.footercol ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none;}
.footercol li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px enterprise #ccc;}/* ----- Footer End ----- */

Step vii Now salve your template in addition to yous are done.

Note If it non run thus withdraw code that yous convey pasted above
]]></b:skin>.Go to template>customise >advanced>add css.Copy the code nether measuring vi in addition to glue there, click employ to blog.

Customization
To modify background color of the footer section, modify background:#333434; to your desired color, highlighted inward higher upwardly code.

To modify background color of the widget columns, change
background:#333434; to your desired color

To modify color of the Title of widget change color:#fff; to your desired color.