4 Add a Customized Three Column Footer Widget In Blogger

Instructions To Follow:

Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template:

And immediately before it, paste this code:
/* -----   LOWER SECTION   ----- */
#lower {
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434; }
#lower-wrapper {
       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;
       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;

Step#3 Now find the bellow code

</body>just before it, paste this code:

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

Now click Save Template


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 Hex Color Code Chart & Generator   or  Html Color Codes 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!

UPDATE:  I updated some of my posts, this post I update click this link........

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets

Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

4 Responses So Far:

Anonymous said...

You are the best

Muhammad Amier baksh Gabol said...

hay bro nice blog.. check me .

Unknown said...

Great Isfo dear......:)
Nice blog......plz chek my blog

Unknown said...

hi brither this is so nice blog. please check my blogsite: www.tipsbold.blogspot.com and rafiqcity.blogspot.com.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Powered by Blogger