Add 3 Column Footer Bar To Blogger

Wondering How To Add Footer Bar To Blogger then you are on right platform because today we are going to share How To Add 3 Column Footer Bar To Blogger.

How To Add 3 Column Footer Bar To Blogger

Footer Bar is a must widget in every blogger templates because By using Footer widget we can Add different Elements to footer bar like About Us, About Blog, Subscription Widget, Facebook like box, Twitter follower box and many other widgets.
So if you want to add footer bar to your blogger template then follow all steps below one by one.

Steps For Adding 3 Column Footer Bar To Blogger

  • Go to blogger Dashboard.
  • Click On Edit HTML

Note: (Before Doing Any Editing Make sure Backup your template first.)

  • Add Check Mark in Expand Widget.
  • Find this code by Pressing CTRL+F <b:section class=’footer’ id=’footer’/>
  • Replace <b:section class=’footer’ id=’footer’/> With Below Code.

<div id=’footer-column-container’>
<div id=’footer2′ 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=’footer3′ 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=’footer4′ 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 id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’><b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section></div><div style=’clear:both;’/></div>

  • Now Find This Tag ]]></b:skin> By Pressing CTRL+F.
  • Paste Below Code Just Above Of ]]></b:skin> tag.

/* Footer by */
#footer-column-container {clear:both;}
#footer-column-container h2{font-size:18px;text-align:left;color:#ddd;Times New Roman&quot;,Times,serif; font:normal bold 18px Arial,Georgia,&quot;text-transform:none}
.footer-column {padding: 10px;}

  • Now Save Your Template.
  • That’s it. You have added this footer bar to blogger blog. 
  • Now Go To Layout section and add some widgets to footer bar and that’s it.


So above guide is about How To Add 3 Column Footer Bar To Blogger and i hope by this complete guide you can easily add this widget to your blogger template. If anyhow problem persist after following all steps carefully then drop a comment below, we will help you. Don’t forget to share on blogging communities and with your blogger Friends.
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: