How to add a three column footer to blogger?

If you want to add the three column footer to your custom blogger template.Try the below tutorials to add the three column footer template to your blogger.
add three column footer to blogger
Part1
Login to blogger->> Template or Design –>> Edit Html
Search for the following code</head>
Add below code after </head>


#footer-columns{
    border-top:1px dotted #999999;
    clear:both;
    margin:0 auto;
}
.column1{
    padding: 0px 5px 3px 5px;
    width: 30%;
    float: left;
    margin:3px;
    text-align: left;
}
.column2{
    padding: 0px 5px 3px 5px;
    width: 30%;
    float: left;
    margin:3px 3px 3px 5px;
    text-align: left;
}
.column3{
    padding: 0px 5px 3px 5px;
    width: 30%;
    float: right;
    margin:3px;
    text-align: left;
}
.addwidget {
    padding: 0 0 0 0;
}
#footer-columns ul {
    list-style:none;
    margin:0 0 0;
    padding:0 0 0;
}
#footer-columns li {
    margin:0;
    padding-top:0;
    padding-left:0;
    padding-bottom:.25em;
    padding-right:15px;
    text-indent:-15px;
    line-height:1.5em;
}
body#layout #footer-columns {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
body#layout .column1 {
    width: 32%;
    float: left;
}
body#layout .column2 {
    width: 32%;
    float: left;
}
body#layout .column3 {
    width: 32%;
    float: right;
}
save and done
Part2
Now search for the below code
<b:section class='footer' id='footer'/>
Delete above code and replace it with below code
<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>
Save template and you are done.

No comments:

Post a Comment

Please comment the message if you like post or any trouble