Sticky Footer Bar for Your Blog

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
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -420px;
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);
footer a.frinmash{
font-size:16px !important;
text-decoration:none !important;
margin-right: 300px;
white-space: nowrap;
color:#bfbfbf !important;
footer a.frinmash:before{
content: '';
background: url('') 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('') no-repeat 0 0px;
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

<a class='frinmash' href=''>FrinMash Socail Media Tech and Tutorial Blog</a>
<div id='frinmash-actions'/>
<span class='close'/> 
After applying the code to you template refresh your blog.

Image:- FrinMash

About Unknown

    Disqus Comment
    Facebook Comment