How to Configure 3 Column Footer in the Blog | Share To World

Saturday, July 5, 2014

How to Configure 3 Column Footer in the Blog

  admin       Saturday, July 5, 2014

Footer section of any blog is the one of the most essential part of the blog. It is used to display link, content, blog roll, categories, small introduction of your blog, about author, copyright notices, license etc. You can use your blog's footer in any way you like. But many blogger templates out there don't come with footers and for people like you who like the design but miss the footer.

Here, how to add 3 column footer into your blog :

1- Log in to you Blogger account
2- Go to Template -> Edit HTML
3- Look for the existing footer code near the end of your HTML. It might look something like this:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
If you already have contents in the footer, the code should be longer.
4- Copy and paste the code below immediately under the footer </div>. This code will create 3 new gadget containers (one for each column) under the existing footer container.

<!-- three column footer HTML Start by -->
<div id='new-footer-wrapper'>
<div id='column1-wrapper'> 
<b:section class='new-footer' id='new-footer1' preferred='yes'/>

<div id='column2-wrapper'> 
<b:section class='new-footer' id='new-footer2' preferred='yes'/>

<div id='column3-wrapper'> 
<b:section class='new-footer' id='new-footer3' preferred='yes'/>
<div style='clear: both;'/>
<!-- three column footer HTML End -->
5- Press Ctrl + F to find "]]></b:skin>",  Copy the code below and paste it in this CSS section before "]]></b:skin>"
/* three column footer CSS Start by */
#new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;} 
#column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}  
.new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;} 
.new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
.new-footer .widget-content { padding: 0px 5px 5px 5px; } 
.new-footer ul { list-style-type:square; margin-left:15px; }
/* three column footer CSS End by */
6- Save the template and go to Layout. You should have the 3 empty footer container added at the bottom of the Layout.

Now you can drag and drop the gadgets from the existing footer or sidebars into the new footer containers.
If the columns are not distributed correctly, try adjusting the width in line 3 and right margin of CSS code.

Don't forget to share this awesome trip to friends by clicking sharing buttons below.


Thanks for reading How to Configure 3 Column Footer in the Blog

« Prev Post

No comments:

Post a Comment