Add Custom Blogger Three Column Footer Widget In Layout

Create and add custom blogger three column footer in lower part in layout. When you add three column widget at footer in blogspot template, it looks pretty. Give a stylish look of any template layout by adding custom CSS three column footer widget in blogger. You can add your favorite widget to show at template footer. Sign in Blogger> Select blog> Template> backup/restore button and download current template settings.

Here is DEMO of custom three column footer widget for blogspot.

Go to Templates options> customize> Advanced> Add CSS
Copy and paste custom CSS part of three columns footer widget and click on apply to blog. after that HTML code given below after CSS coding that will be applied in template by edit HTML.

/* — Custom CSS Part Of Three Columns Footer Widget  — */
#fcol1 {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#344434;
}
#fcol2 {
margin:auto;
padding: 20px 0px 20px 0px;
width: 900px;
}

#fcol3 {
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;
}
.lowrbar {margin: 0; padding: 0;}
.lowrbar .widget {margin: 0; padding: 10px 20px 0px 20px;

}

.lowrbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#4784ce;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #4484ce;

}

.lowrbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.lowrbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #fff;
}

This is a Custom CSS part of column footer for blogger. After adding above code to css box in advanced option in customize template, now add HTML part before </body> tag . For this search </body> and paste the given below code above </body>.

/* — Custom HTML Part Of 3 Column Footer Widget  — */

<div id=’fcol1′>
<div id=’fcol2′>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid1′ preferred=’yes’>
</b:section>
</div>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid2′ preferred=’yes’>
</b:section>
</div>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid3′ preferred=’yes’>
</b:section>
</div>
<div style=’clear: both;’/>
</div> </div>

You have done edit HTML part in template. Save the template and visit the blog you can see three column at footer of blog. For add text/HTML you need to go Layout here you can see three new widgets click on add a Gadget and paste any thing text/HTML or add new gadgets from blogger.

For customization of this widget change given values like font style, color, column width and heading style.

• font: bold 16px Arial, Tahoma, Verdana;  for font change.
• width: 900px;   Change over all widget width.
• background:#344434;   for widget background color change.
• width: 32%; change width of each column.
• color:#4484ce; Change headings color.
• background:#fff;  for background color change.

For further help feel free to write by comments about this widget.

Tags: Blogger, Widgets For Blogger

Category: Blogger