add simple four footer column on blogger template

Senin, 09 Januari 2012

Step:1 for css
#lowerbar-wrapper2 h2 {
background: none repeat scroll 0 0 transparent;
color: #8A8888;
font: bold 130% arial;
letter-spacing: 0;
margin: 4px 4px 4px 0;
padding: 0;
text-shadow: 0 1px #FFFFFF;
text-transform: none;
}
#lowerbar-wrapper2 a {
text-decoration: none;
}
body#layout #ads-header {
display: none;
float: right;
height: 60px;
margin-right: 20px;
margin-top: -42px;
width: 468px;
}
#ads-header {
display: none;
height: 60px;
margin-left: 464px;
margin-top: -39px;
width: 468px;
}
#lowerbar-wrapper2 ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#lowerbar-wrapper2 li {
margin: 0;
padding: 0;
}
#lowerbar-wrapper2 {
float: left;
line-height: 1.6em;
margin: 0 10px auto 0;
overflow: hidden;
width: 227px;
word-wrap: break-word;
}
#veshje {
background: none repeat scroll 0 0 #ECECEC;
padding-top: 135px;
}
#poshte2 {
margin: 0 auto;
padding-bottom: 11px;
padding-top: 15px;
width: 950px;
}

}
]]></b:skin>


step:2 find code below like this

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div>
<!-- end content-wrapper ->
</div></div>


<!--
Step:3 Install code below after step 2 codes-->

<div id='poshte'>
<div id='poshte2'>
<div id='lowerbar-wrapper2'>
<b:section class='lowerbar' id='lowerbar21' preferred='yes' showaddelement='yes'/>
</div>
<div id='lowerbar-wrapper2'>
<b:section class='lowerbar' id='lowerbar22' preferred='yes' showaddelement='yes'/>
</div>
<div id='lowerbar-wrapper2'>
<b:section class='lowerbar' id='lowerbar23' preferred='yes' showaddelement='yes'/>
</div>
<div id='lowerbar-wrapper2'>
<b:section class='lowerbar' id='lowerbar24' preferred='yes' showaddelement='yes'/>
</div>
<div class='clear'>&#160;</div>
</div> </div>

or before code below

<div id='footer-bg'>
<div id='footer'>