Sunday, 10 November 2013

Tagged under: , , ,

How to Add Two Columns Footer Widget To Blogger ?

How to Add Two Columns Footer Widget To Blogger
Are you using default blogger template or custom template, Sometime you must be worried about the blogger footer widget. As usual we see that most of bloggers show only three columns widget below footer area of the blog. Most of tech blogs showing two columns widget and other multiple. What to do if we want to show only two column widget inside blogger. Google official says that blogger is the only platform which allow users to customize every single part of its layout interface. So it concluded that we could easily customized, added and remove widget inside blogger template without any hassle. Yesterday one of our users have requested how to add two column widget in blogger blog. So in today article you will guide you, how to add two columns footer widget in blogspot template to make the footer designing stylishly.

Why To Add Two Column Widget in Blogger

Adding two column to footer in your blogger blog will bring awesomeness, It will accommodate further gadgets in the blog without creating an extra div section. Each column accommodated many gadget as you wish to add in to footer. So it is a good practice to add the widget without customizing the template, You will have just to add html/Javascript gadget and past your desire widget coding. 
By default this widget will show two columns in your blog footer. So make sure your gadget will show parallel in the footer section with left and right hand style. So you can add as many widget as you want to add but all of them will be shown in two columns. If you want to show multiple columns just read the below tutorial.

How does It look Likes in Blogger

It is a good practice to take look into the gadget demo before applying to your blogger blog. You must have to look how the widget will show on the blogger layout interface and where it will be visible to show in the blog. To see the demo look into the below screenshot. Minded this is only the layout interface screenshot, the widget will look different on your blogger home page. 

How to Add Two Columns Footer Widget To Blogger

To view this widget on your blogger homepage it will display as same we have mentioned in the below screenshot. It does not mean that, you are not be able to customize this widget, If you want to customized, we can easily increase the layout or maximize the height that solely depends on your blog homepage width and main layout. So to give the illustrative view it would somewhere look like the below demo.

How to Add Two Columns Footer Widget To Blogger

Learn How to Add Customize Two Column Footer To Blogger

Do not worry this is not so difficult process, even for beginner blogspot user to add this customize footer widget. You will have to follow some of the below given tips to add this customize footer in your blog. Follow the below step by step guide correctly and do the action.

Step:1

  • Go to blogger Dashboard:
  • Go to template >> Editor html mode:
  • Now Search For >> ]]></b:skin>
  • Now past the below given Css code above ]]></b:skin>


/* -----  PBT  LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;        float: left;
       margin: 0px 85px auto;
       padding-bottom: 20px;        width: 32%;        text-align: justify;
       font-size:100%;
       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;
       color:#0084ce;         text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}


 Part: 2

  Now find </body> it mostly appeared in the last of blogger template and past the below given cod 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 style='clear: both;'/>

    </div> </div>

Finally Save your Template and you have done almost:

Possible Customization

By any chance if the widget does not show in the exact position, then you could easily follow the below tips to make it design perfect for your blog.

Read these instruction in our earlier post >>Make These Customization


Need Help in Customization

We hope you would this splendid tutorial to add two columns footer widget in blogger blog. We have been prepared this tutorial with great effort, hope you will get good result without any bugs or error. If anyone found problem during implementation then kindly post you query in the comment section. thanks and happy blogging.

6 comments:

  1. Hiii Hafeez,
    thanks Bro for sharing a nice and customized footer widget. you always share very nice and simple thing for the help of other bloggers.

    Amit Kumar

    ReplyDelete
    Replies
    1. Yes buddies, PBT is the place for newbies to find splendid tutorial about blogger platform. By follow the above tips, even a teenager can add 2 columns widget in blogger blog. We always write in simple to understand teenager what has describe in the post. thanks and happy blogging.

      Delete
  2. nice sharing bro thanks for telling the method.

    ReplyDelete
    Replies
    1. Hell Rizwaz see you after so long here. Thanks for appreciation.

      Delete
  3. yes bro too busy in these days i have no contact of you so i am away to touch with you as personal conversion so feel free to email me your personal contact info at Rizwansaharan3d@gmai.com

    ReplyDelete
  4. Hey. Thanks for a great method! But I still have a quastion, how I can add full-width column with copyright info and etc like this: http://www.designfinder.net/uploads/gallery/gallery_0_28.png ?
    Thanks!

    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