How to Customize Three Column Footer Widget In Blogger


#1

Asalam o Alikum,

I hope you will be fine. I need Little help from you.

with Reference to your post. (Add a Customized Three Column Footer Widget In Blogger) (http://www.mybloggertricks.com/2010/01/add-customized-three-column-footer.html)

i have successfully implement your this tutorial but i want to change the size of each column and want to make it little bigger. You have already mentioned in customization section of your post how to change size i.e. increase 32% figure. it works correctly but the problem is that as i increase it from 32% to 33% then 3rd column goes in the next line in footer under two column. I don’t know how to fix this issue? Please Help me


#2

Hey I have not tested it, but what I think is that, when you change width: 32% to width: 33% also increase width: 960px to width: 990px , I think it will solve your problem. BTW please share your blog with us.


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

#3

[quote=“NamanKumar, post:2, topic:2511”]

#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
[/quote]
  • change the width: 960px; to width: 990px;

[quote=“NamanKumar, post:2, topic:2511”]

#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; }
[/quote]
  • change width: 32% to width: 33%.

#4

Thanks For your reply but it didn’t worked. Please find out some other solution. Thanks


#5

@abdul2442

Would you mind to share your blog or website url where you wish to create three column footer, it will help us to serve you better.


#6

www.60news.net is my blog address. Currently i have maintained it to 32% but need to make footer Column bigger.


#7

@abdul2442, find this:

#lower-wrapper { 
   margin:auto; 
   padding: 20px 0px 20px 0px; 
   width: 960px;

and change width: 960px to decrease or increase the space in left and right of footer. And to increase the widget of widgets, just find:

#lowerbar-wrapper { 
   border:1px solid #DEDEDE; 
   background:#fff; 
   float: left; 
   margin: 0px 5px auto; 
   padding-bottom: 20px; 
   width: 32.08%; 
   text-align: justify; 
   font-size:100%; 
   line-height: 1.6em; 
   word-wrap: break-word;       
   overflow: hidden; 
}

and change width: 32.08%; to increase or decrease the widget’s width. :smile: