Sticky Footer Bar for Your Blog

A new trick to create sticky footer bar for you blog using CSS and HTML.

It's just a simple trick for creating sticky clean footer bar for your blog, like a hover type you just need to follow the step below.

1. Adding the CSS code in you blog

/*--------------------------------
Created:- By Frinton Madtha
---------------------------------*/
footer{
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -420px;
background-color:#1f1f1f;
background-image:-webkit-linear-gradient(top, #1f1f1f, #101010);
background-image:-moz-linear-gradient(top, #1f1f1f, #101010);
background-image:linear-gradient(top, #1f1f1f, #101010);
border-radius:2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index:1;
}
footer a.frinmash{
font-weight:normal;
font-size:16px !important;
text-decoration:none !important;
display:block;
margin-right: 300px;
text-overflow:ellipsis;
white-space: nowrap;
color:#bfbfbf !important;
z-index:1;
}
footer a.frinmash:before{
content: '';
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiedysWqmo_p0M8A7vGsSPCptZKkVPxw0nA1TTF681EWmd7PGXz3flIAm5XMrdV1rmSnbP7xHVYt1MPcUedIci5OTZ85AfmiSa09qvvlRc64h0NDO8RpqZyeJLSbEHuVWDhMgFIEtCzYzrN/s1600/frinmash.png') no-repeat 0 0px;
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close{
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRH6yIXtA_0_h7wNyEHR9HtIhppx3G5o-NObpwy6YXuMTYVZ5VQjlgqRcuGiGobFFOAXav7wsKJZnzEsN_Lxbjz8tLE3avI8pLLg8nvXBkqwz8FBgXDGzR4cigUd1Vr2_a3gf7njH1ytr/s200/frinmash-close-button.png') no-repeat 0 0px;
top:10px;
right:10px;
z-index: 3;
}
footer #frinmash-actions{
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
footer #frinmash-actions iframe{
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}

2. The next part is to add footer code

<footer>
<a class='frinmash' href='http://frinmash.blogspot.com/'>FrinMash Socail Media Tech and Tutorial Blog</a>
<div id='frinmash-actions'/>
<span class='close'/> 
</footer>

After applying the code to you template refresh your blog.

Image:- FrinMash