How To Add 2 or 3 or 4 Columns Footer Section In Blogger

The bottom portion of your blog is significant, where your visitor stops at some time after scrolling your blog. So in today's post, I will mention how to add 3 or 4 column to the footer section in your blogger blog where you can add special links, or social pages like about me, or Adsense ads, or something special you want.

Like other posts, I will mention in the same article about adding 2 or 3 or 4 columns to the footer section in your blogger blog, Or if you want to add it all together at your footer, we will also mention that.

Let's Start Adding Columns To Footer Section

STEP 01:
As you know, to change Blogger Template, go to Blogger Dashboard > Theme > Edit Html

STEP 02:
Then, click anywhere on template code and press Ctrl + F and find out the given code below by searching "footer" text.

Find the code lines of "footer" in your Blogger Template:

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

or something similar like footer-wrap or footer_wrapper or something similar like

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

STEP 03:
Now, you have to add the following code by replacing the above code. That means you have to delete from beginning to end of div

To Add 2 Columns Widget Section In Blogger 

<div id='footer-columns'>
<div id='footer-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

To Add 3 Columns Footer Widget Section In Blogger

<div id='footer-columns'>
<div id='footer-1' style='width: 33.33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-2' style='width: 33.33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-3' style='width: 33.33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

To Add 4 Columns Footer Widget Section In Blogger

<div id='footer-columns'>
<div id='footer-1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column3' preferred='yes' style='float:left;'/>
</div>
<div id='footer-4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Finally, don't forget to save the template to see the changes.

How To Add All Together At Your Footer

Haha, it looks like you've got the pleasure of blogger template design. I created the above code in that way. That means after you replaced the first code of (2 Columns), add (3 Columns ) code just below previous (2 Columns) code, then (4 Columns ) code.

Note here: However: if you want to use the above code again and again, then you need to change the div id and section id inside the above code.

At The End

Hopefully, you successfully have 2 or 3 or 4 columns in the footer section in your blogger blog. If you have a little bit of complexity try a little bit, then you can succeed or write down on the comment box.