Friday, 22 November 2013

Add 3 Footer Column to Blogger

Footer widgets are one of the most essential part of a blog for displaying less but must display content, like about the author, copyright notices, license etc. But many blogger templates out there don't come with footers and for people like you who like the design but miss the footer, here is a small guide to add a simple footer to your blog and if you know basic css, then you can make necessary changes to the styles.
What we will integrate is a simple dark background, 960px wide footer area with 3 widget area of 306px each. We shall then demystify the necessary CSS part so that even if you don't know CSS, you can easily modify the looks.





To start with, login to your blogger account, navigate to 'Template' and hit 'Edit HTML'.
Steps to be taken for installing this widget
Step 1Go to your Dashboard of your blog
Step 2: Click HTML Structure Integration
Step 3:  Just copy the below code and paste it just above </body>.
<div id='footer-column'><div class='footer'> <b:section class='footerA' id='footerA' showaddelement='yes'/></div><div class='footer'> <b:section class='footerB' id='footerB' showaddelement='yes'/></div><div class='footer'> <b:section class='footerC' id='footerC' showaddelement='yes'/></div></div> 
Step 4: First, let's just copy and paste the below code just above ]]></b:skin>
#footer-column{width:948px;margin:10px auto;padding:10px 6px;overflow:hidden;background:#333;color:#fff;}.footer{width:306px;margin:0px 5px;padding:0px;overflow:hidden;float:left;}.footer h2{font-weight:bold;margin:5px;padding:5px 0px;border-bottom:2px dashed #ff0000;color:#fff;}.footer a{text-decoration:none;font-weight:bold;color:#00fff0;}.footer a:hover{color:#fff;}
Step 5: Click "Save" button. And, "Save the arrangement" of your blog.

0 comments