How to create a three column footer in blogger?

It is similar to three column template all we have to do is to remove & add some HTML & CSS code

Firstly we need to create a footer-wrapper just like outer-wrapper outside outer-wrapper.After doing it create three divs inside footer-wrapper and name it as footer1,footer2 and footer3 respectively

we need to share the width equally among three column footers ( footer1 , footer2 , footer 3)

footer-wrapper = footer1 + footer2 + footer3 + padding

670px = 220px + 220px + 220px + 5px or 10px

After sharing float the first two column footers to left and third one to right

Lets me show you how to create three column footer with the minima template

•Login to your dashboard

•Create a blog or select a existing blog, choose minima template

•Now goto Layout > EDIT HTML

•ADD & REMOVE few CSS and HTML codes

Remove

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

and ADD the below code before ]]></b:skin>


#footer-wrapper {
width:670px;
margin:0 auto;
padding:5px;
}
#footer1{
width: 220px;
float:left;

}
#footer2{
width: 220px;
float:left;

}
#footer3{
width: 220px;
float:right;

}

Remove

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

</b:section>
</div>

and ADD the below HTML code before </body>


<div id=’footer-wrapper’>
<div id=’footer1′>
<b:section class=’footer1′ id=’footer1′ preferred=’yes’>

</b:section>
</div>
<div id=’footer2′>
<b:section class=’footer2′ id=’footer2′ preferred=’yes’>

</b:section>
</div>
<div id=’footer3′>
<b:section class=’footer3′ id=’footer3′ preferred=’yes’>

</b:section>
</div>
</div> <!–End of Footer Wrapper–>

•Now save the template and enjoy the three column footer

•Check the demo @ http://minima-3-column-footer.blogspot.com/

Download Minima 3 column footer template

Share on Facebook



Comments (6)

  1. Reju November 7, 2009
  2. Linna August 20, 2010
  3. Kannan Sanjeevan August 24, 2010
  4. mida September 21, 2010
  5. Kannan Sanjeevan September 21, 2010
  6. XaKaW September 16, 2011

Leave a Reply