Modified 4 Widget on Footer

This is a second part of previous article Add 3 Widgets on Footer, then we will make a small mo difications to add 4 widgets on footer.

For that you have to read the article before.

1). Open the registry editor
Login => Go to Layout => Edit HTML.

Leave the Expand Widget unchecked.

Backup your template.

2). Find this section :

]]></B:SKIN>

3). Right above the section, paste this code :
#footer-column-vista {
clear:both;
}

.footer-column {
padding: 10px;
}

4). Scroll down to end, find this section :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5). paste this code below into the highlighted red code
(change the code in Red with this new script)

<div id='footer-column-vista'>

<div id='footer2' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='vist1' preferred='yes' style='float:left;'/>
<b:widget id='HTML2' locked='false' title='Widget 1' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 180px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='vist2' preferred='yes' style='float:left;'/>
<b:widget id='HTML3' locked='false' title='Widget 2' type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 180px; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
<b:widget id='HTML4' locked='false' title='Widget 3' type='HTML'/>
</b:section>
</div>

<div id='footer5' style='width: 300px; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
<b:widget id='HTML5' locked='false' title='Widget 4' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='vista-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

6). You can make some adjustment for :
Widget ID : HTML no, Text no according to your existing widget.
Width : in px or % (300px or 30%) not exceeding Outer wrapper width
Text-Align : Left or Right

Save your template and view the result.
And now you get 4 column widget on footer in your blog.
Post a comment related to the topic above and question if you have any trouble.
Thank you.