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.
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.
All Possible Customization
- To increase or decrease the overall width of the widget then simple change the value of width 960px
- 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>
- 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>
- Remember that lowerbar# indicate the number of columns. So if you wish to add 5th column then simply replace lowerbar# with lowerbar5.
- After adding the fifth column then remember to change width: 23%; with width: 17%;
- 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.
