Add a Personalized Three Column Footer In Blogger

In many professional blogs you might have observed that many webmasters have applied different widgets which keep the readers or visitors engaged with the blog and spend a lot of time on the certain blog. As far as the widgets used in header or sidebar are concerned you can’t forget the widgets used in footer. A beautiful footer full of stuff also play a key role in attracting the visitors towards your blog. In this tutorial we are going to discuss about the Personalized Three Column Footer Widget where you can add whatever content you like.

How It Works?

This widget is located at the footer section of your page, which contains three columns where you can set up the number of widgets as you like.

Add a Personalized Three Column Footer In Blogger:

Let’s see how you can implement it in your blog.

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin>. Click ► to expand the code.

5. Copy & paste the following CSS styles just above ]]></b:skin>.

/* ----- Three Column Footer CSS Styling Starts ----- */
#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;
}
/* ----- Three Column Footer CSS Styling Ends ----- */

6. Now inside the “HTML EDITOR”, Press CTRL+F and search for </body> tag.

7. Copy & paste the following code immediately before </body> tag.

/* ----- Personalized Three Column Footer Starts ----- */<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>
/* ----- Three Column Footer Ends ----- */

8. Click “Save Template”.

You are all done, refresh your blog to see your PERSONALIZED THREE COLUMN FOOTER WIDGET.

Note:-

To customize the Three Column Footer Widget your way, follow some descriptions below:

1. To change the Background Color of the widget, edit background: #333434 to your own color. 

2. To change the color of Title Headings, edit color:#0084ce; 

3. To change the Font size and Font family, edit font: bold 14px Arial, Tahoma, Verdana; 

4. To change the Size, Style and Colour of the border that appears below links, edit border-bottom: 1px dotted #ccc; 

5. To adjust the Width according to your blog, edit width: 960px; to your own width. 

6. To change the Background Color & Width Of The Three Columns where the widgets are added, edit background:#fff; & width: 32%; 

7. To change the Thickness, Style and Colour of the border that appears at the bottom of Title Heading, edit border-bottom:3px solid #0084ce; 

That’s All.

Happy Blogging.

Need Help?

Hope this tutorial helps you in adding the fully Personalized Three Column Footer Widget in your blog easily. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)