Header Ads

  • Breaking News

    How to Create a Three Column Footer Widget in Blogger


    Have you ever thought about having an extra space in your blog footer section for adding more widgets to your blog? You might have seen three column footer widgets section on many websites. Most of the templates come with built-in footer sections, but if unluckily your template doesn't contains a footer and you want to add it! Don't worry, we'll help you in creating a three column footer in blogger.

    If your sidebar is loaded with various widgets and you want to add more widgets without removing them. Then footer section is the best solution. By creating a footer section in your blog, you can add more widgets to your blog in the footer section. So, today in this tutorial we're going to share How to Create a Three Column Footer Widget in Blogger.


    First of all, log in to your Blogger Account  Select a Blog  Template  Click Edit HTML and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before ]]></b:skin> tag.


    /* -----   Footer Start   ----- */
    #footer {
           margin:auto;
           padding: 0px 0px 10px 0px;
           width: 100%;
           background:#333434;

    #footer-wrapper {
           margin:auto;
           padding: 20px 0px 20px 0px;
           width: 960px;
    }
    #footercol-wrapper {
           background:#333434;
           float: left;
           margin: 0px 5px auto;
           padding-bottom: 20px;
           width: 32%;
           text-align: justify;
           font-size:100%;
           line-height: 1.5em;
           word-wrap: break-word; 
           overflow: hidden;
           color:#fff;
    }
    .footercol {margin: 0; padding: 0;}
    .footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

    .footercol h2 {
          margin: 0px 0px 10px 0px;
          padding: 3px 0px 3px 0px;
          text-align: center;
          color:#fff;      text-transform:uppercase;
          font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
          font-size:21px;
          border-bottom:2px solid #fff;
    }
    .footercol ul {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          list-style-type: none;
    }
    .footercol li {
          margin: 0px 0px 2px 0px;
          padding: 0px 0px 1px 0px;
          border-bottom: 1px solid #ccc;
    }
    /* -----   Footer End   ----- */



    Again search for </body> tag and just above/before it add the following code

    <div id='footer'>
    <div id='footer-wrapper'>
    <div id='footercol-wrapper'>
    <b:section class='footercol' id='footercol1' preferred='yes'> 
    </b:section> 
    </div> 
    <div id='footercol-wrapper'>
    <b:section class='footercol' id='footercol2' preferred='yes'> 
    </b:section> 
    </div> 
    <div id='footercol-wrapper'>
    <b:section class='footercol' id='footercol3' preferred='yes'> 
    </b:section> 
    </div> 
    <div style='clear: both;'/> 
    </div> </div>



    Finally click Save Template button and you're done!
    Now go to Layout and start adding widgets to your footer section.

    Customization:

    • background:#333434; The background color of the footer section, you can change it according to your website colors
    • background:#333434; The background color of the widget columns. In my case the backgrounds of both footer section and widget columns is same
    • color:#fff; The color of Widget Title



    No comments

    Post Top Ad

    Post Bottom Ad