Follow Me:

Thursday, August 21, 2014

Custom CSS Footer For Blogger

CSS Footer For Blogger

Do you use blogger with its custom template and still you don't have a footer or your using the Attribution gadget instead of footer now you don't need to worry as today we are going to add a footer which can be used in blogger custom template as well as your own modified template.


We are going to create this footer using the CSS and HTML code which is simple to add in you blogger template so lets starts adding the footer.

1. First of all you need to backup your blogger template.

2. Next step is to find the </b:skin> tag in your template after you find the tag just add the below code above the this tag.
/* Footer
----------------------------------------------- */
#footer-wrapper a{
font-weight:normal;
}
#footer-wrapper {
background-color: #F6F6F6;
color: #999999;
margin: 30px 0 0;
padding: 20px 0;
}
.footer-inside {
margin: 0 auto;
width: 840px;
}
.copyright {
margin: 0;
}
.copyright span{
float: right;
}
3. Moving on to the third step is to add the HTML tag this should be added before the </body> of your template.
<div id='footer-wrapper'>
<div class='footer-inside'>
<p class='copyright'>
&#169; Copyright 2014. Powered by <a href='#'>Blogger</a>. <span> <a href='#/'>TNB by Frinton</a></span>
</p>
</div>
</div>
Change the link which are in bold to your own link.

Finally save your template and you are all done!

Image:- TNB

3 comments:

  1. you can even add transparent code to it to match template
    CSS:- background-color: transparent;

    ReplyDelete

Creative Commons License