Perhaps you have installed a template (customized template) that does not have any footer widget place holder, the good news is that you have the right to install one, even though you are not the owner of the template, in as much as it was downloaded for free.
Most important;You will have to be careful before-you-modify-or-add-directly-to Your template codes
How To Install
- Add this CSS code to your blogger template by Copying the below code and past it just above ]]></b:skin>
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434; }
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff; float: left;
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:#0084ce; text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }
.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-bottom: 1px dotted #ccc;
- Then Copy the below code again and past it just before </body> of your template
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
Now You can change the following as it seems right for you
Customize Footer Background and Size
background:#333434; Changing the six digit color code will change the background color of this widget.
width: 960px; This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
background:#fff; and width: 32%; is the background color and width of the three columns where the widgets are added.
Font Color, size and style of the widget heading
color:#0084ce; This is the Color of Title Headings font: bold 14px Arial, Tahoma, Verdana; Edit this to change the font size and family.
border-bottom:3px solid #0084ce; Edit this to change the thickness, style and color of the border that appears at the bottom of Title Heading.
border-bottom: 1px dotted #ccc; Editing this will change the size, style and color of the border that appears below links.
Comments
Post a Comment