How to Get the most Stylish & impressive Three Column Footer in Blogger

Today we bring you the most stylish and most impressive editable 3 column footer for your blogspot blog.

It is pretty common that you might have seen all the professional blogger templates would possess a three column footer where in, they add details about their site or an about me widget and lots more.

I recommend you to add this feature in your blog to make it more professional.

You may scroll down the page to have a look at the bottom of the page to have a look at this widget which contains categories, Popular Posts, About Us, Useful Resources, Blog Archive and Recent Comments. Hope, you got an idea about what a three column footer is.

Get the most Stylish & impressive Three Column Footer in Blogger

To add this stylish three column footer to your blog, just follow these simple steps. As we always ensure safety, the first step would be to back up your template.

To do this, simply navigate to

Design->Edit HTML

and make a backup of your template clicking on the

Download full template link at the top of the page. Once the back up is over, follow these simple steps.

Now remove all the Widgets present in the Footer section. You can also move the Widgets from Footer to another section also. I personally prefer moving the footer widgets to sidebar.

Now search your template and find the following code (There may be something in the ID part like “footer” or “footer-block” or something similar to that.

<div id=’footer-wrap’>
<b:section class=’footer’ id=’footer’/>
</div>

Replace the code with the one present below

<div id=’footer-wrapper-container’>

<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>

<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
</b:section>

</div>
<div style=’clear:both;’/>

</div>

Now you need to add some styling to your Footer Section

#footer-wrapper-container {
clear:both;
}

.footer-col {
padding: 10px;
}

If you had successfully followed all the steps then you will have a beautiful Three Column Footer in your Blog.

If you face any problems then feel free to contact us.. We’ll be ready to help you…do comment on this article and do subscribe to our latest RSS Feeds

Get all Blogging Tips & Tricks, ideas, Wordpress Hacks & Tricks, Social media optimization, SEO, Online money. Just subscribe with your email id HERE.

1 Comments

  1. This is very interesting. I’ll have to research this more. Thanks for posting.

0 Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

*