How to Cretae a 3 or 4 Column Footer in Your Blogger Blog

Hi all, you might have seen many blogs have footer with 3 columns or 4 columns in it. You can see a 3 column footer in this blog itself. In case the footer is not visible, just click on the + sign with ‘Toggle footer’ link in the bottom right and you will see a 3 column footer which displays 6 recent posts in each category. So have you seen the benefit in adding a columned footer to a blog? Yes, you are right. You can showcase some of your posts suppose recent posts or a contact form or a Facebook Like box or follow widget into these columns. I have added three category posts to these 3 columns in footer. You can easily add a 3 or 4 column footer to your blog just by adding few lines to your blog template. I am going to tell you how to create a columned footer to your blogger blog. Just follow these steps.

Step I: Login to your blogger account and go to Dashboard.
Step II: Go to ‘Template’ and click on ‘Edit HTML’. Click Proceed if required.
Step III: Now press CTRL+F on your keyboard to search a string and search for the following:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are not finding this code in your template, then search for footer-wrap or something like that which represents you footer code in your template.
Step IV: Now replace the above code (all 3 lines) with the following lines of code:
<div id='footer-columns'>

<div id='footer1' style='width: 30%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Step V: Save your template and you are done. You have successfully added a 3 columned footer to your blog template. Now go to Layout tab on your blogger Dashboard and you should see three column widgets in the footer of your template. Add codes to these 3 HTML/Javascript gadget to display recent posts etc. in the footer.

Adding a 4 column footer

To add a footer with 4 columns, follow the above steps up to Step III and in Step IV, replace the code with the following lines:

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Now save your template and add codes/text to the footer widgets.

---

Showing Recent Post feed of specific category in the footer widget

---

If you want to show a number of posts in the footer columns then follow these steps:

 Go to Layout of your blogger template. You should see a footer like the following image:
Click on Add a Gadget link and add an HTML/Javascript gadget.
Copy and paste the following code to the HTML/Javascript gadget.

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://www.techbhuvan.com/feeds/posts/summary/-/CATEGORY?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<div id='attrib'><a href='http://www.techbhuvan.com' rel='dofollow'></a></div>

Replace the word ‘CATEGORY’ with your own category which you want to show in your footer column. also change the max-result=5 attribute to any number you desire. This will change the maximum number of posts you want to show in the feed. I have limited it to 5 posts. You may change it to 8, 10 or whatever you want. Save your widget.
Add 3 HTML/Javascript gadgets in all three columns and add the above code with your desired post category. You are done. You should see something similar to my footer in your blog.

---

Stylify your footer columns

---

To add style to the columns you have just added, you can add a stylesheet to your template. You can simply do so following these steps.

When You are adding the new columned footer in your template(in Step IV above), you need to add the following line at the beginning of the code.

<div id='techbhuvanfootr'>

And add a </div> at the end of the code. Now search for ]]></b:skin> in your template and add the following lines just above this.

#techbhuvanfootr .footer-wrap ul li {
padding: 5px 0 5px 15px;
overflow: hidden;
border-bottom: 1px solid #343434;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMle-Efgm6C2cgoFgil9RH70-pWL8sgc88kvSCBLxA-yZeD2AjzxmeYbIaLk2kKjkMcEEQGxYjA7vLO2RrxD2WrpesQZYX4zIGbaroowc-hnHJcKwA4kvmrZTNcDJW_NwHa5ke0z9nW9o/s1600/techbhuvan-bullet.png) no-repeat;
margin: 15px 0;
}
#techbhuvanfootr .footer-wrap a {
 color: gray;
 font-weight:400;
 font-size:13px;
}
#techbhuvanfootr .footer-wrap a:hover {
 color: white;
}

Now save your template and see the changes.
If you are benefitted from this tutorial, please share this with your friends. If you face any problem or any confusion, please comment below. Thanks.

http://www.casino-online.us