Create 3 Column Footer Section In Blogger Template

  1. Back up your existing blog template
  2. Move all existing widgets from the existing footer section
  3. Add extra code to your footer section.
Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

Now you need to find this section in your template:


Replace the entire line highlighted in red with the code below:
















Its a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
  1. Adding style for the new footer section
    Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "" tag, which is where the style section of your template ends.

    Immediately before this line, add the following lines of code: 
#footer-column-container {
  clear:both;
  }

.footer-column {
  padding: 10px;
  }


And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

site visitor