Blog footer is the extra space at the bottom to add more widgets.widgets are very important for more exposure of your blog post.By default blogger template have one column footer but some blogger want more column to add more gadget at footer.to add three column footer we have to edit template.After editing template we will see more column at the bottom of template,then we can add widgets like contact us, label widget or others.
This is very simple tutorial even blogger who not know much about coding can easily modify their template but before editing template can get backup of blogger template.Now we will change one column footer to three column.First we will add small code before closing body and then we will add skin for designing of the footer.Let start the process, just follow the below steps.
How to add three column footer in blogger template
Step 1 Login to blogger account and select your blog
Step 2 Go to template and edit template.
Step 3 Press ctrl+f and Search below code
</body>
Step 4 Add below code before </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 5 Now search for
]]></b:skin>
Step 6 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 solid #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 solid #ccc;}/* ----- Footer End ----- */
Step 7 Now save your template and you are done.
Note If it not work then remove code that you have pasted above
]]></b:skin>.Go to template>customise >advanced>add css.Copy the code under step 6 and paste there, click apply to blog.
Customization
To change background color of the footer section, change background:#333434; to your desired color, highlighted in above code.
To change background color of the widget columns, change
background:#333434; to your desired color
To change color of the Title of widget change color:#fff; to your desired color.
