What a coincidence tonight I actually want to post about how to How to Add Footer 3 Column on Blogspot.
Adding footer whether it's 2 columns, 3 column or 4 columns below postings have become a common thing, when talking tutorials have many were made, but sometimes some of the codes mentioned could not be found (because the templates do not support) or there could be differences code, so that discouraged to make a footer.
Well, let's just say this is the alternative (if your friends want to make a footer but it must change the code but that code does not exist) because we do not need to delete but just add it.
Function:
Footer (3 columns) was used to create space in the blog a bit wide at the bottom so it does not make the sidebar is full (because of additional widgets and such).
Incidentally my blog templates currently do not have a footer before so I had to add it manually, and do as below.
Ok, for my friends who want Adding Footer 3 Column on her blog, please follow the steps below:
1. Login blogspot account,
2. Click the Design / Design>> Edit HTML>> Click on Expand Widget Templates,
3. Then find the following code: ]]></b:skin>
4. Add the code below exactly was on that code:
/ * bottom
---------------------------- * / # bottom {
width: 900px;
position: relative;
clear: both;
margin: 0 auto;
color: # fff;
float: left;
background: transparent;
padding: 15px 0 15px 0;
}
h2 {# bottom
text-align: center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color: # AEB404;
font-size: 24px;
letter-spacing:-1px;
border-bottom: 1px solid # fff;
}
# bottom {ul
padding: 0;
margin: 0;
}
# bottom li ul {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed # AEB404;
}
# bottom ul li a {
display: block;
padding: 0 10px;
color: # 0701FD;
text-decoration: none;
}
# bottom ul li a: hover {
background: transparent;
}
# left-bottom {/ * code footer left column * /
width: 32%;
float: left;
padding-left: 10px;
}
# center-bottom {/ * code footer middle column * /
width: 32%;
float: left;
padding-left: 10px;
}
# right-bottom {/ * right footer column code * /
width: 32%;
float: left;
5. Continue to look for the following code:
Adding footer whether it's 2 columns, 3 column or 4 columns below postings have become a common thing, when talking tutorials have many were made, but sometimes some of the codes mentioned could not be found (because the templates do not support) or there could be differences code, so that discouraged to make a footer.
Well, let's just say this is the alternative (if your friends want to make a footer but it must change the code but that code does not exist) because we do not need to delete but just add it.
Function:
Footer (3 columns) was used to create space in the blog a bit wide at the bottom so it does not make the sidebar is full (because of additional widgets and such).
Ok, for my friends who want Adding Footer 3 Column on her blog, please follow the steps below:
1. Login blogspot account,
2. Click the Design / Design>> Edit HTML>> Click on Expand Widget Templates,
3. Then find the following code: ]]></b:skin>
4. Add the code below exactly was on that code:
/ * bottom
---------------------------- * / # bottom {
width: 900px;
position: relative;
clear: both;
margin: 0 auto;
color: # fff;
float: left;
background: transparent;
padding: 15px 0 15px 0;
}
h2 {# bottom
text-align: center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color: # AEB404;
font-size: 24px;
letter-spacing:-1px;
border-bottom: 1px solid # fff;
}
# bottom {ul
padding: 0;
margin: 0;
}
# bottom li ul {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed # AEB404;
}
# bottom ul li a {
display: block;
padding: 0 10px;
color: # 0701FD;
text-decoration: none;
}
# bottom ul li a: hover {
background: transparent;
}
# left-bottom {/ * code footer left column * /
width: 32%;
float: left;
padding-left: 10px;
}
# center-bottom {/ * code footer middle column * /
width: 32%;
float: left;
padding-left: 10px;
}
# right-bottom {/ * right footer column code * /
width: 32%;
float: left;
padding: 0 5px 0 10px;
}5. Continue to look for the following code:
<div id='footer-wrapper'>
or
<div id='footer'>
(usually on top of the code </body>)
or
<div id='footer'>
(usually on top of the code </body>)
6. And add the code below exactly was on that code:
</body>http://htmlentri.co.cc/<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
7. If you already click Save Template (see the changes while on the Page Elements).
</body>http://htmlentri.co.cc/<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
7. If you already click Save Template (see the changes while on the Page Elements).
Posts
