I have seen many blogs and websites uses three column widget at the bottom of their section to add attractive and useful stuff to keep readers busy. I have found this widget in one of website, download the code and modified its CSS to match with my website. You can see demo below of working three column footer widget in my website. You can add whatever stuff you want. I will guide you on how to add this footer widget to your blog.

Working Demo: Here

How To Add Three Column Footer Widget To Blogger

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for ]]></b:skin> in your Template and replace with below code. More Info On: "How To Find A Code In Blogger Template".

/* ----- Start 3 Column Footer Widget Code by http://www.ravisaive.in  ----- */

#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5);  background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px;  width:1000px;  border:1px solid #dbe1e6}
#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.lowerbar{margin:0; padding:0}
.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px}
.lowerbar .widget-content{padding:5px 5px 5px 15px}
.lowerbar h2{background:none repeat scroll 0 0 #1C262F;color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase}
.main .Blog{border-bottom-width:0}
.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 20px;border-bottom:1px dashed #dbe1e6;background:url(http://1.bp.blogspot.com/-PzPP314ZtGE/TgX2iGxUcKI/AAAAAAAAEio/-xqTO1ZeCKo/s1600/bullet-point-image-1.png) no-repeat left}
.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none}
.lowerbar a:hover{color:#A61111; text-decoration:none}
.lowerbar a:visited{color:green; text-decoration:none}

/* ----- End 3 Column Footer Widget Code by http://www.ravisaive.in  ----- */

]]></b:skin>

5. Now Search For </body> and just above paste below code.

<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>

6. Save your template.

How To Add Widgets To 3 Column Footer

1. 1. Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.

2. You see 3 Columns to your Footer Section. Refer screen below.


3. Now click on "Add a Gadget" to add Widgets.

3 Column Widget Customization

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.

1. Lower-Wrapper Width: width: 1000px; This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.

2. Lowerbar-Wrapper Width: width: 332px; This is the width of the three columns where the widgets are added. you can change this width to match your blog.

3. Additional Customization: If you want to widget to be placed under footer section then follow below steps.

4. Search For <div id='footer'> OR <div id='footer-wrapper'> and just below add code. Refer 5th step above.

5. Save your template.