Saturday, 22 June 2013

Tagged under:

New Multi Column Footer Widget For Blogger

Multi Column Footer Widget
If you are a regular reader of PBT then you might be noticed that few days back we have shared a detailed tutorial about three columns footer widget which was liked & appreciated by most of the bloggers & webmasters. Today we have one another interesting same widget which will consist multi columns widget. By adding this customize widget your blog will be atomically turned into professional view. Sometime we need a multiple columns in footer area to add many gadget according to our requirement. Yesterday i met with one of my client he was asking about the same issue how could we customize blogger template footer to add multiple gadget in specific columns. So this article will show us how to add multi column widget in blogger blog.
   

How This Widget is Different Than Previous One

Yes there is a quite difference, our earlier widget was consist on only three section columns where each column accommodated as many gadget as we want to add. but remember that widget has limited in columns.
Where this widget will normally consist of four columns sections where each columns will accommodated many gadget as want to add. We say that four columns, but you have full rights to customize it and add more extra columns according to your blog width. So in this widget we have normally four columns but we if we want then we could easily add more than four columns.

How to Add Multi Column Footer Widget In Blogger Blog

This is a very simple methodology which consist of two part, first we will add the Css coding in template than after than we have to add Html codes in template. Lets go how to do this.

Step:1
  • Go to blogger Dashboard:
  • Go to template/edit Html:
  • Now find ]]></b:skin> tag
  • Past the below given code before ]]></b:skin>



    /*----- PBT MULTI COLUMN FOOTER WIDGET -----*/

    #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: bold 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;
    }

Part: 2

Once Again Search for </body> tag and past the below given code before or above the </body> tag.




    <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>

Now Save your Template you have done Almost:

Check the Widget in Layout Option

After adding the above codes you will be able to find such like gadget in the footer area. See the screenshots. How look this gadgets.


Customized multi columns footer widget


All Possible Customization

  1. To increase or decrease the overall width of the widget then simple change the value of  width 960px


  2. If you want to have only three verticle columns then simple delete this section from the above code
    <div id='lowerbar-wrapper'>
        <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
        </b:section>
        </div>


  3. If You want to add extra column means columns no 5 then simple add the below code just after this tag  <div style='clear: both;'/>

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


  4. Remember that lowerbar# indicate the number of columns. So if you wish to add  5th column then simply replace  lowerbar# with lowerbar5.


  5. After adding the fifth column then remember to change width: 23%; with width: 17%; 


  6. Only repeating step 3  if you want to add more columns as you wish to create. 





Need Help

We are confident that this little tutorial would help you a lot to create multiple columns footer widget for blogger blog. Hope guys there will be no difficulty in implementation this widget. If you found any bugs then kindly post your queries in comment area. We love to solve your problems. Do not to forget to share your ideas about this widget.

32 comments:

  1. Nice one bro Hafeez. You always come up with an outstanding topic. Thanks so much for always keeping your readers with up to date blogger tricks. Have a nice time bro..

    ReplyDelete
    Replies
    1. Thanks Victor Bro you always encouraging our team. Thanks For your Appreciation. This is indeed a very nice and attractive widget for blogger blog. Thanks for visiting us. Hope to see you soon.

      Delete
  2. Nice, thanks for this guide. I been using the widget editor but i never thought editing xml is another trick.

    ReplyDelete
  3. One of the best widget for the modern seo templates. I am using this on my both blog. keep sharing hafeez. Love the way you are working for us.

    ReplyDelete
    Replies
    1. Bundles of Thanks Saqib Bro this one is really a professional looks footer widget for blogger template. It will bring beauty into your blog. Thanks for visiting us.

      Delete
  4. Replies
    1. Thanks Muhammad Bro for appreciation. hope to see you soon. keep visiting us.

      Delete
    2. Vist http://locasure.blogspot.com

      Delete
  5. Very Nice Widget And One Of The Best .

    Regards
    Rizwan Shajahan
    http://www.envyblogging.blogspot.in

    ReplyDelete
    Replies
    1. You are welcome Rizwan bro we want to communicate love and make a readerships, keep visiting us.

      Delete
  6. Great work Hafeez bro.. I am agree with Victor's words that you bring really outstanding topics for us. Keep updating us bro :)
    God Bless You!
    Regards!
    Ankit

    ReplyDelete
    Replies
    1. Bundle of Thanks My Dear, Both of you rights this widget is widely used by so many web-designer, Sometime we need to add extra columns in footer area. So this is a complete helpful tutorial about the multiple columns widgets. Thanks Ankit Bro have a great time with hope to see you soon here.

      Delete
  7. great widget bro..
    my recent post here-http://techblogguide.blogspot.com/2013/06/comin-soon-blogger-template-for-blogger.html

    ReplyDelete
  8. Dear Hafeez Very Nice Widget Really Help Full For EverY Blog Doing Great Job Allah Bless You Thanks....!!

    ReplyDelete
    Replies
    1. God Bless you Too, Thanks my Dear, You are one my oldest, loyalest, and regular reader, i want to see you same in the future. Bundle of thanks.

      Delete
  9. Dear Hafeez Bro, Plz help me. As replied by you, i have added a Blockquote style to my blogger template. I am facing a problem.When a select a part of my article an click on blocquote and publish it, the part of the article which is Blockquoted get disturbed in appearance, means it no more appear as i have written it. It is became a regular line with out any design. you can see my post and blockquote style. I want to place the Code in blockquote such that it will appear as it is looks in your blog. How can i do it?? PLzzz Reply me. You can see my blog post here http://www.wpbloggertricks.com

    ReplyDelete
    Replies
    1. Bro Join Me at facebook i will customize it for you.

      find my on facebook. hafeez.khan9000@gmail.com or skype. hafeez.ullah.khan6

      Delete
  10. Just out of curiosity: why did you use 6 DIV's and 4 B:Sections; while you also could have been using a table with 4 columns? Or am I missing something?

    ReplyDelete
    Replies
    1. Harry we did,nt catch your words what exactly you mean that. Try to mention your query in detail. Thank.

      Delete
  11. Once again you did great job hafeez bro u write owe sum topics and share with us thank u so much for giving us information about footer widget thanks

    ReplyDelete
    Replies
    1. Thanks Rizwan Bro Yes we have already publish its first part earlier. Now its 2nd part in which we have multiple columns sections widget. Thanks for communicating with us. Bye Bye.

      Delete
  12. That is amazing and you are doing great Job Hafeez sir.

    ReplyDelete
    Replies
    1. Oh You say SIr, Not bro do,nt say that words. Considered me as Brother. i will remain brother forever. I will help you guys every time. I want to communicate with you. Just love and wish you all the best.

      Delete
  13. Thanks brother for sharing nice post. i read above all comment. i am very happy to see others love for you. you great sir g.
    Regards: http://w3mix.com/

    ReplyDelete
    Replies
    1. Well done thanks for your so cute words. Rana we are happy to communicate with you do,nt call me Sir, We are all brothers. i am not considered my self as an expert than you guys i just spread my knowledge and love to communicate with you.

      Delete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hafeez bhai its awesome very help full post i saw your all website and decided you are graeat yar.. thank you for posting such use full tricks and much more

    ReplyDelete
    Replies
    1. Oh my Dear Junaid thanks for the appreciations and being landed with us on PBT. So finally you have found me here. Anyway hows it going your life these days i really miss you. now i want see you here with each post. Bundles of Thanks for landing with us and hope to see you soon in my coming tutorial.

      Delete
  16. it does not work for me, i don't have the columns horizontally, but vertical

    can you help me?

    ReplyDelete
  17. thanks its work....

    http://www.loserengineer.com/

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism