Add 4 Column "Page Elements" Above Footer

Previously I've been through a tutorial similar but not identical, Read : Add a Page Element Above Footer, because the element is added to the previous post just three columns, now we will learn how to add a gadget above plus 4 column footer as shown below: Read : Tooltips Cool With CSS3

1. After sig in your blogger account >>> "dashboard" >>> "Click menu templates" >>> "Edit HTML"

2. Add the following CSS code after the tag or code]]> </ b: skin>

/* --- LOWER --- */
/* --- CSS modified by: Amatullah. Sy --- */
#lower {
     border-top:10px solid #F781F3;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}
#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #FBEFF5;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}
#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     line-height: 1.6em;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {
     margin: 0;
     padding: 0;
}
.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}
.lowerbar h2 {
     background:#F781F3;
     -moz-border-radius-bottomleft:6px;
     -moz-border-radius-bottomright:6px;
     -webkit-border-bottom-left-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     margin: -10px 0px 10px 0px;
     padding: 3px 0px 3px 0px;
     text-align: center;
     color:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}
.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 #DF0101;
}
.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}
.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}
.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://amatullah83.blogspot.com--- */
/* --- End Lower--- */

Note: Please edit the CSS code above, to adjust the column display with your template.

Notice the red writing on the lower wrapper, width with a width of 960px replace your footer.
To change the color code please see color code.

3. Add the following HTML code above the <div id = "footer-wrapper '>

<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><!-- end lower-wrapper -->

Save the template. See the results on the page elements, whether there are already four columns above the footer? If yes, please add a gadget or widget that you want.
Hope it is useful! Read Also : Stylize blogger popular posts widget 2015