Dear Readers: HWS has recently started a new project for the students of engineering ====> The Engineering Projects

Write at HWS !!!

Guest Posting

Friday, May 13, 2011

Add a Customized Three Column Footer Widget In Blogger

Three-Column-Footer You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.
See a screenshot, Three-Column-Footer-Widget

Add This Three Column Widget Inside Your Blogger Templates

Follow these steps,
  1. Go To Blogger > Layout > Edit HTML
  2. Back Up your template
  3. Search for
  4. Just before this paste this CSS code,
/* ----- LOWER SECTION ----- */
#lower {
padding: 0px 0px 10px 0px;
width: 100%;
#lower-wrapper {
padding: 20px 0px 20px 0px;
width: 960px;


#lowerbar-wrapper {
border:1px solid #DEDEDE;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
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;
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;

5. Now Search For < /body> and just above this code paste the code below,
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<div style='clear: both;'/>
</div> </div>

6. Save your template. done!
Now visit the page Layout > Page Elements and start adding widgets! :>>


You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator
  • background:#333434; Changing the six digit colour code will change the background colour 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 colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour 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 colour of the border that appears at the bottom of Title Heading
  • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.
That’s All!
A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor!

About the Author

I am XEO Hacker, the founder of Hack With Style (HWS). I am blogging since 2009 before that I just search things and now I am sharing my knowledge through this plateform.I'm also a freelance writer on topics related to Website Hacking,Website Optimization (SEO), blogger customizations and making money online.
In 61 people's circles

Subscribe To Get FREE Tutorials!

Respected Readers:
As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.


On EasyHits4U you can earn free advertising credits by viewing other website-ads from a membership base of over 1.2 million accounts. Earn advertising credits faster with a view for view model.

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Please do not spam Spam comments will be deleted immediately upon my review.

XEO Hacker

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More


Recent Posts

Join Me On Facebook

700+ Followers


meet women in Ukraine contatore visite website counter

Recent Comments

Follow Me On Twitter

1112+ Followers