Advanced Multi Column Footer Widget For Blogger

In many blogs/website, you may have found different types of column footers which are great also, but am bringing to you, the new advanced version of column footers.
In this new version, you can expand/collapse the column to three, four or even five. By default the footer is four column, but don't exceed it more than five, to make it look more professional.

How To Add Multi Column Footer

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" (For old interface)
• Click on "Template" > "Edit HTML" > "Proceed" (For new interface)
• Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

    /*----- Advanced Multi Column Footer By www.realcombiz.com -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: normal 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

• Now find </body> and paste the following code above/before </body>

    <div id='lower'>
    <div id='lower-wrapper'>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>

    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>

    </b:section>

    </div>

    <div style='clear: both;'/>
    </div> </div>

• Clcik Save template

Now go to page elements and start adding widget on each section.

Customization

The overall width of the column footer is represented by width: 960px; and the width of each column is represented by width: 23%;, you can edit any of this to your own satisfaction.
Looking at the code above carefully, you should understand the structure of the column footer, the code below represent each column.

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

If you want to add the fifth column, simply add the above code, above <div style='clear: both;'/> and replace lowerbar4 with lowerbar5, as it represent the column number.

Done!
Hope you like this post?

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz