Skip to main content

Add 3 Column or 4 Column Footer to Blogger

Image
By Admin
In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

Convert your Blogger footer to a 3 column footer

How to Add a 3 Column Footer to Blogger

  1. Log in to Blogger if not already logged in

  2. Navigate to Layout > Page Elements

  3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes

  4. Navigate to Layout > Edit HTML

  5. Back up your template as a precaution by downloading it to your computer

  6. Find the following section in your Blogger template

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

    If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.

  7. To Add a 3 Column Footer to Blogger
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' 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='footer2' 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='footer3' 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>

    To Add a 3 Column Footer to Blogger with a Lower Footer Section
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' 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='footer2' 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='footer3' 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;'/>
    <p/>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>

    Add 3 column footer to Blogger with a lower section
    To Add a 4 Column Footer to Blogger
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>

    Convert Blogger Footer to a 4 Column Footer

  8. Save changes to your Blogger template.

  9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.

  10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.

  11. Click View Blog to admire your new footer section

Tips and Troubleshooting

  1. To Add Padding Between Footer Columns in Blogger
    To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

    #footer-columns {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }

  2. To Add a Border to the 3 or 4 Column Blogger Footer

    • For Top Border Only of the 3 or 4 Column Footer
      Paste the following code before the </b:skin> tag

      #footer-columns{
      border-top:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example


      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;
      }

    • For a Box Border Around the 3 or 4 Column Footer

      #footer-columns{
      border:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example

      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;
      }


In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck!

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Customize Blogger Tips
Labels:

Comments

Post a Comment

Popular posts from this blog

Panjang Maksimum Deskripsi Video Youtube dan Pesan Kesalahan

By Admin
Ada banyak diskusi di sekitar tentang menambahkan Caption teks ke deskripsi video YouTube Anda. YouTube secara otomatis akan mengkonversi konten audio dari streaming video Anda ke teks biasa - sehingga dapat digunakan untuk teks tertutup. Anda tentu saja harus cek dan edit ini sebagai hasil yang sedikit aneh dari waktu ke waktu! Anda kemudian dapat menambahkan teks keterangan ini untuk deskripsi video YouTube Anda. Sehingga akan diindeks juga oleh mesin pencari. Masalahnya adalah bahwa itu sangat mudah untuk menemukan kesalahan pada YouTube di mana dikatakan bahwa pengaturan video Anda tidak bisa diselamatkan alasan adalah bahwa baik deskripsi terlalu panjang atau berisi karakter ILLEGAL.  Ini adalah pesan kesalahan yang sangat tidak membantu. Oke. YouTube Anda memberitahu bahwa deskripsi terlalu panjang? Atau apakah itu mengandung karakter ilegal? Atau keduanya? Setelah mengalami masalah ini beberapa kali, saya mengatur tentang bereksperimen dan melihat apa yang sejauh des...
Post a Comment
Read more

How to Add Internal Links Within Blogger Posts

By Admin
In the Blogger tutorial I discuss how to add internal links within your Blogger posts (Blogspot posts) to point to either another section within the same post or to another post. There are lots of times when you may want to direct a reader to a different part of your Blogger post depending on what their needs and interests are. Or you might want to alert the visitor to something significant in a related post. In this article I will show how to make use of internal links both within posts and in Blogger generally. Why bother with internal linking you may be wondering? Well the answer is to improve SEO. Blogs with a good internal linking structure will fare better than blogs that don't link posts. Plus you will be creating an aid to navigation for your reader. On longer posts jumps links to different sections within your post or to other posts mean readers can quickly find the information they are looking for. How to Create Internal Links To Sections Within the Same Blogger Posts How...
2 comments
Read more

How to Add a Subtitle to Blogger Posts

By Admin
This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post. I also discuss the benefits of adding subtitles to Blogger articles. This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes. Benefits of Using Subtitles in Posts Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be: Title: Add a Subtitle to a Blogger Blog Subtitle: Make Your Posts More Search Engine Friendly and User Friendly If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a...
Post a Comment
Read more