How to Add Three Column Footer Widget in Blogger

Sometime you might be get interested to add professional column widget in blogger template. however we have seen a lot of professional blogger template which have not well organized and have no professional like footer widget. Since from the couple of days we have received so many comments from our loyal readers posting theirs queries about how to add customize footer widget in blogger template. So in today post i am presenting you professional looks footer widget which contain three columns where each column separately accommodate many widgets as you want to add. So once you added this footer section in to your blog then you could easily add furthers gadget separately inside specific column. So In this post we will learn how to add three column footer widget in blogger blog.

Part2: How to Add Multi Columns widget In Blogger: In Process

How This Blogger Three Columns Footer Is Created ?

This widget is created in Css3 and Html. As we know that Html is using for building the maps for objects or creating body shape So in this gadget the Html coding has build its body and divided it into three columns sections.

where as we already familiar with Css ( cascading style sheet) which work as decorating the html object. IT make the Html objects stylishly & designable. So this widget is stylized by Css3. To know more about Css & HTml follow the below tutorial.

Take a looks into This Gadget

If you are willing to know more about how will look like this widget in blogger template then we will show it by screenshots just scroll down and look at its demo by screenshots. This customize widget will look like these gadget mentioned in the screenshots.

These are two similar Widget with different added Gadget this mean once you added this footer widget in blogger then after it you could easily add further gadgets inside this footer widget. The real example is in front of you.

 1

2

Learn How To Add Customize Three Column Widget In Blogger

In this para you will learn how to add this gadget in blogger template. Follow all the below given steps correctly hope you will not be facing any problem once you follow all the steps carefully. Lets start to adding this gadget in blogger.

Step:1

• Go to blogger Dashboard:
• Go to template >> Editor html:
• Now Search For >> ]]></b:skin>
• Now past the below given Css code before ]]></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 5px 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;
}

 Step2:

• Now Search For this </body> tag and just above it past the below given code:

<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 style='clear: both;'/>
</div> </div>

 

Final:
Now you done almost: Save Your Template and refresh your template: 

Make These Customizations

Here is all possible customization which could be easily done inside the widget. So you can customize this gadget by playing with all the above bold color values and codes. So lets do all the possible customization according to your blog designing. Make this gadget according to your blog layout.

• To change Background color of the entire widget just change #333434;
• If the width of the widget is exceeding the border or larger than your blog width just decrease or increase width: 960px; value;
• If you want to change columns title colors just change background:#fff; 
• width: 32%; is the width of separate columns. to increase single columns increase it.
• There is a color for title inside each columns gadget if you want to change it just change color:#0084ce;
• If you want to change fonts size and color just change edit this font: bold 14px Arial, Tahoma, Verdana; 
• border-bottom:3px solid #0084ce;  Editing this to change the thickness of columns, and change color of borders which appeared at the bottoms of  the Title Headings.
• border-bottom: 1px dotted #ccc; Editing this to change the style, size and colour of borders which  appeared below link.
• You done all most: 
      

Tweet