Search Blog








Add 3 Column Footer Widget In Blogger Blogspot

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.

how to add 3 column footer in blogger template


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.


IconIconIconFollow Me on Pinterest
Blog Widget by LinkWithin