Adding Two Column Footer Widget to Blogger/BlogSpot

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.

Adding Two Column Footer Widget to Blogger/BlogSpot

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.

Adding Two Column Footer Widget to Blogger/BlogSpot

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.

Archives

Label