Especially for beginner like me myself don't know much about CSS these steps are relatively easy to do
There is no need to make some changes on the original designed codes brought by the template you are using.
- First go to Edit HTML on your blog's template editor.
- Find ]]></b:skin>
- Then copy and paste following codes before / above ]]></b:skin>
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#fff; }
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 940px;
}
#lowerbar-wrapper {
border:none;
background:#fff; float: left;
margin: 0px 5px auto;
padding-bottom: 10px;
width: 32%;
text-align: left;
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:#444;
text-transform:uppercase;
font: normal 14px Arial, Tahoma, Verdana;
border-bottom: 1px solid #E5E5E5;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border:none;
}
Note: Adjust the width of your footer area by customizing this code width: 940px; . For other personalized change based on your taste such as the background color, font size, margin, padding or else, simply explore the above given codes by changing or removing unnecessary codes.
- Next, using CTRL + F to find <div class='footer'>
- Again, copy and paste these code before / above <div class='footer'>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>
<div class='footer'>
- Click Save Template.
- To see if your editing works or not, just go to Layout. When you see there area 3 boxes (slot to add a gadget) in a row above the footer area, Voila! you have successfully added 3 footer columns on your blog.
0 komentar:
Posting Komentar