This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. By using this website you also agree to our FTC Disclosure, Privacy Policies, Copyright Notice, and other Terms and Conditions"

Proudly Powered By Blogger
Completely Unique Theme Development
Designed with by ™ SHIBLI N.



Think Globally, But Act Locally

WorkStation247 | Creative Resources

StartUp Digital Entrepreneur's Creative Converting Resources

18 May 2016

How To Add 2/3/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. 
How To Add 2/3/4 Columns Footer Section In Blogger
4/ 5 stars - "How To Add 2/3/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...

No comments:

Post a Comment


Recent Comments

Theme Design Secrets



" No matter how many times you made mistakes
or how slow you progressed
you are still way ahead of everyone
who are not trying"



Unlock
Blogger Theme Design Secrets
Learn Form The Basic
[ ] hover over to see secrets



Soon to be revealedy

In progress 'Wait for it...' ;)







About Services

Video Editing, Graphic Design, Custom Template Design, service is currently not available due to excessive demand. We expect to accept new orders from March 1st, 2019.
Exclusively on Fiverr
Thank you for your understanding.



And this is what i do
UNLOCK

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});