How to Add a Page Element Above Footer

Blogger Widget - In this article, still in the design of the blog, I again gave a tutorial blog on "add page element above the footer". Previously I've been posting about "Stylize blogger popular posts widget 2015" and "Make Tooltips Cool With CSS3 For Bloggers".
Screenshot can be seen in the figure below:

If you are interested, please follow the steps

Here's how to add elements above the footer:

Login to your blogger

In the template menu tab, click Edit HTML
Backup your template, click Download Full Template
Now find this code:

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Add or copy and paste the following code under the code before

/* bottom
----------------------------------------------- */
#bottom {
width:900px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:1px solid #333;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#bottom ul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:200px;
float:left;
padding-left:15px;
}
#center-bottom {
width:200px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:420px;
float:right;
padding-right:15px;
}

Now we create the HTML code for the element above the footer. Find this code:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Add the following code above the code above:

 <div id='bottom'>
<b:section class='bottom' id='left-bottom' preferred='yes'/>
<b:section class='bottom' id='center-bottom' preferred='yes'/>
<b:section class='bottom' id='right-bottom' preferred='yes'/>
</div> <!-- end bottom -->

     Now click the Save button TEMPLATE
     finished

Note: adjust the size of the width (widht) footer with your template and width of the element to be added to adjust your taste by observing the distance margin.
To see the results go to page elements, good luck!
Read Also : How To Make Random Post Only Title In Blog