Create Three Column in Blogger Footer

One of my reader asked how to Create Three Column in Blogger Footer as he had some problem in doing that. Now i will hold this tutorial to make three column easily. As if you want a three columns in your blogger template like others then you can have it now.

GO TO BLOGGER LAYOUT > EDIT /HTML

Now (Ctrl + F)Search for below codes,

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

After getting these codes just replace the red line with the following codes,

<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 PREVIEW IT.

If No errors then proceed and add css part to it.

Find </b:skin> and place the below codes before it

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

.footer-column {
padding: 10px;
}

And save Your Template now.

Now Go to Page elements you can see three column created in your footer above your main footer. I think you would love this hack.

57 Comments

  1. cheth November 7, 2008
  2. cheth November 8, 2008
  3. lvs November 27, 2008
  4. Anshul November 28, 2008
  5. PS 24-7 November 30, 2008
  6. AB January 4, 2009
  7. Fashion Ivy January 19, 2009
  8. eeeian1 February 21, 2009
  9. Meuledor March 4, 2009
  10. Mith April 8, 2009
  11. Anshul April 8, 2009
  12. amprawin April 10, 2009
  13. Anonymous April 24, 2009
  14. Pixel May 13, 2009
  15. Taufik May 13, 2009
  16. Anshul May 13, 2009
  17. Taufik May 13, 2009
  18. Anshul May 13, 2009
  19. Taufik May 17, 2009
  20. Anshul May 17, 2009
  21. Taufik May 17, 2009
  22. Anshul May 17, 2009
  23. Taufik May 19, 2009
  24. maidulctg May 23, 2009
  25. Anshul May 23, 2009
  26. Steven May 28, 2009
  27. Anshul May 28, 2009
  28. chinna June 2, 2009
  29. Anshul June 2, 2009
  30. London Chow June 10, 2009
  31. CyberRon June 19, 2009
  32. ayie July 7, 2009
  33. Anshul July 7, 2009
  34. RanaSpot July 7, 2009
  35. Anshul July 7, 2009
  36. RanaSpot July 7, 2009
  37. JohnPatra July 26, 2009
  38. jayaraj July 31, 2009
  39. Anshul July 31, 2009
  40. Mottobiz August 7, 2009
  41. Anshul August 7, 2009
  42. Mottobiz August 7, 2009
  43. Unity Bond August 8, 2009
  44. Anshul August 8, 2009
  45. Blogger Nutshell August 10, 2009
  46. izdelava spletnih strani November 13, 2009
  47. Dawn Farias November 21, 2009
  48. Anonymous December 19, 2009
  49. Cassie Lew April 12, 2010
  50. Anshul April 12, 2010
  51. h_8 April 25, 2010
  52. h_8 April 25, 2010
  53. The Evil Genius June 28, 2010
  54. Anshul June 29, 2010
  55. The Evil Genius June 29, 2010
  56. Psi Salud May 27, 2011

Leave a Reply