Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Advanced Multi Column Footer Widget For Blogger

by Durodola Ridwan | Friday, September 21, 2012 | 6 Comments

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!".

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. i've just tried it on my site but it didn't work. is it because i'm using blogger template? And if that's the reason, is there a way to make it compartible with the template?

    Thanks

    ReplyDelete
    Replies
    1. It doesn't matter the type of template you are using. This site template is also a default blogger template and we are also using the multi column footer, so i think you have made a mistake somewhere, i guess you should try again.

      Delete
  2. it works in my blog! :D
    but I have some questions,
    First, how to make a transparent black background or border behind the footer column/text? I just want to make it easier to read because in my blog the text and the main background have a similiar color
    Second, when I tried to make only 3 footers, it doesnt exactly centered, how to change/modify it?

    hope you understand what I mean, I'm sorry if my english's bad
    Thanks a lot

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger