Add a Customized Three Column Footer Widget In Blogger

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,

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 ]]> paste this CSS code,

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

* -----   LOWER SECTION   ----- */ 

5.   Now Search For  and just above this code paste the code below,

 

 

 
 
 

 

 
 
 

 

 
 
 

 

 

6.  Save your template. done!

Now visit the page Layout > Page Elements and start adding widgets! :>>

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

Random Posts...!!!

• 

  5 SEO Tips To Get Massive Traffic

  15/09/2012 - 1 Comments

  First of all you should kept mind that blogging is all about posting. As much as you post, you will get your…
• 

  Snapseed Best Photo Editing Apps For Andriod Ipad

  20/10/2013 - 2 Comments

  Snapseed: The Best free Photo Editing App is now on AndroidSome months ago Google bought in the…
• 

  How to Add Admins to Google Plus Page

  14/10/2013 - 0 Comments

  Google+ makes it easier now for larger companies to manage their Google plus business pages by allowing you…
• 

  Advanced Mashable Style Following Widget For Blogger

  06/10/2013 - 0 Comments

  Adding eye-catching social sharing widget to your blog/site increase your chances of getting more…
• 

  10 Ways to Make Money Online in 2013

  06/09/2013 - 1 Comments

  hareIn Today’s cyber world there are many ways to earn money online. People are making hundreds of dollors…
• 

  Cool Stylish CSS Labels For Blogger

  30/09/2013 - 0 Comments

  Friends, This is a widget to modify your label to a brick style with CSS effects. It is very effective widget…
• 

  Add CSS Styling to Blockquotes in a Blogger Template

  29/06/2012 - 0 Comments

  Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling…
• 

  Horizontal Floating Social Sharing Bar For Blogger

  24/09/2013 - 0 Comments

  Hello EveryOne! Today is my first post on my blog. So i shared Floating Social Sharing Horizontal Bar For…

Posted in: blogger,Column,Customized,Footer,Three,Widget

If You Enjoyed This Post Please Take 5 Seconds To Share It!