What's new
Welcome

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

  • Hey Guest! Please turn off your adblocker to help us keep the community running. Thank you

How to add three footer column on blogger(blogspot)

Domain names for just 88 cents!

Life

Verified
Founder
Joined
May 17, 2017
Messages
586
Likes
241
Points
113
Website
www.pearstep.com
#1
Here is another tutorial for those that wants to add footer columns on their blogger theme. This tutorial for those on blogger(blogspot) only. Most themes don't come with footer column and you want to add them to it, this tutorial is for you. Just follow the steps below

Step 1
:
Go to Blogger Dashboard > Theme > Edit Html

Step 2:
Backup Your Template

Step 3:
Search for ]]></b:skin> now paste the following CSS code just above ]]></b:skin>

[HASHTAG]#lower[/HASHTAG] {
border-top: [HASHTAG]#737373[/HASHTAG] 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:[HASHTAG]#1f1f1f[/HASHTAG];
}
[HASHTAG]#lower[/HASHTAG] a {
color: [HASHTAG]#DBDBDB[/HASHTAG];
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:[HASHTAG]#1f1f1f[/HASHTAG];
float: left;
color: [HASHTAG]#ebedee[/HASHTAG];
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:[HASHTAG]#fff[/HASHTAG];
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid [HASHTAG]#666666[/HASHTAG];

}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: [HASHTAG]#3f3f3f[/HASHTAG];
border: 1px solid [HASHTAG]#111[/HASHTAG];
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:[HASHTAG]#000000[/HASHTAG];
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: [HASHTAG]#3f3f3f[/HASHTAG];
border: 1px solid [HASHTAG]#111[/HASHTAG];
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:[HASHTAG]#000000[/HASHTAG];
}.lowerbar li a:hover {
background: [HASHTAG]#4f4f4f[/HASHTAG];
border: 1px solid [HASHTAG]#7a7a7a[/HASHTAG];
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:[HASHTAG]#000000[/HASHTAG];
}.lowerbar a {
font-family: Georgia;
background: [HASHTAG]#3f3f3f[/HASHTAG];
border: 1px solid [HASHTAG]#111[/HASHTAG];
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:[HASHTAG]#000000[/HASHTAG];
}.lowerbar a:hover {
background: [HASHTAG]#4f4f4f[/HASHTAG];
border: 1px solid [HASHTAG]#7a7a7a[/HASHTAG];
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:[HASHTAG]#000000[/HASHTAG];
}
Step 4:
Now search for </body> and paste following code just above </body>

<div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerb <b:widget id='HTML12' locked='false' </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerb <b:widget id='Profile1' locked='false <b:widget id='HTML5' locked='false' t </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerb <b:widget id='HTML3' locked='false' t <b:widget id='HTML9' locked='false' t </b:section> </div>
<div style='clear: both;'/></div></div>
Then Save your template.
Step 5:
Go to Layout you will see your three new footer.

Customization

background:[HASHTAG]#1f1f1f[/HASHTAG]; Controls the background color, so you can change it to your choice.
width: 960px; This is the width of the widget. You can adjust it to your blog size.
background:[HASHTAG]#fff[/HASHTAG]; and width: 32%; is the background colour and width of the three columns where the widgets are added.
color:[HASHTAG]#666666[/HASHTAG]; This is the Colour of Title Headings
font: bold 14px Arial, Tahoma, Verdana; Edit this to change the font size and family.
border-bottom:3px solid [HASHTAG]#666666[/HASHTAG]; Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading.

I hope you love this tutorial, do register and ask us any question you wish to in the question and answer section.