How to Create 4 Columns Footer Widget for Blogger?

By default blogger templates and most of the online available free blogger templates webmasters won’t find four column widgets. In very rare cases you’ll find this type of widgets but for this searching online is wasting of time. Here BlogTariff finds way to solve problem to add four columns widget for blogger. This widget is basically associated with CSS and Hover effect. After adding this widget to blogger can attract readers/visitors to browse more categories on webmasters blog/website. Spicing up blog template is best idea to catch more traffic online by attracting visitors/readers. In this tutorial webmasters don’t need to worry for any type of errors you’ll be perfectly directed to get success in creating four columns widget. Let’s begin the tutorial for creating four columns widget.

How to create Four Columns Widget for Blogger?

Sign into your blogger account
Click on “EDIT HTML” link tab
(Before you do execute backup template if any thing goes wrong you can reuse it again)
Tick on “Expand Widget Tempates” box
Search for code

]]></b:skin>

• After finding code copy the below code and paste above to it

#footer-wrapper {clear: both;width: 100%; height:4px; background: #CF4227;}
#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;
}

• After successful adding the above code now search for code

</body>

• After finding code copy the below code and paste above to it

<div id='footer-wrapper'>
<div style='clear:both;'/>
      </div>
<div id='lower'>
<div id='lower-wrapper'>

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

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

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

<div style='clear: both;'/>
</div> </div>

After successful pasting the above code now, “Save Your Template”.
That’s it you’ve done,
Go to “Page Elements’ link tab there you’ll find Four columns widget for your blog.

If you’re facing any type of difficulty bring to us via comments we’ll try for you.
Don’t forget to get Subscribe to US for not missing our ensuing posts.