Blog Design 101: Adding a fixed footer to Blogger

It has been a very long time since I last did a blog design tutorial. But after many emails asking me to start doing them again I relented. So they’re back. And to kick things off I will be showing all you blogger users how to create a fixed footer. Now in my demo I’ve added social media follow buttons but you could add anything here. For example you could have your pages there or an action box to get people to follow or subscribe.

To see it in action click here

To add one for yourself.

First of all navigate to template>customise>advanced>add css.

Add the following:

.sticky-footer {
background: #000;
bottom: 0;
color: #fff;
font-weight: 100;
left:0;
margin: 0;
opacity: 0.9;
padding: 0;
position:fixed;
width: 100%;
z-index:99999;
}

.sticky-footer-inner {
margin:0 auto;
padding: 20px 0;
text-align: center;
width:90%;
}

.sticky-bar-footer {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.7em;
color: #fff;
margin-left: 20px;
margin-right: 20px;
}

Now go to template>edit html and use ctrl f to find

To add something other than follow buttons replace this code:

If you wish to add follow buttons just replace the links with your own. If you plan to use the icons you’ll also need to add this code to edit html directly underneath

I like sticky footers as they make a nice change to fixed top menus. I wouldn’t advise using a sticky footer at the same time as a sticky header though as it will cover too much of your content. Give a sticky footer a go and leave a comment if you get stuck. What other tutorials would you like to see?