ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger

The widget is pretty neat and has CSS hover effects. Hope you would like it.

So below is the screenshot of what we will be achieving after the we have applied the code to our blogger blogs.

The great thing about this footer design is that you could add as many column to the footer. In our case, we have used 4 columns. But do note that by adding every extra column, you would in fact decrease the size of other columns.

So its best to stick with 4 or maximum 5 columns in the widget. There are 2 parts of the process. One is to add the code for the actual footer widget. Followed by the red applet (red line border) that gives an extra beauty to the widget.

-->

Though you could easily change the colours of any thing that you want. So no need to worry about that.

LETS START!

Step #1: Making The 'Red' Border

Go to Blogger >> Design >> Edit HTML and download the template for backup purposes. Then tick the check box.

Find the following code (Ctrl +F):

]]>

Once you have found this code, now place the following code just above it.

#footer-wrapper {clear: both;width: 100%; height:4px; background: #CF4227;}

Now search for 

 and just above it, place the following code:

     

Step #2: Adding The Footer Its Self

While you are in the Edit HTML mode, search for ]]>

 again. Now we have to add the CSS code for the footer widget. This code is responsible for the styling of the footer. Any change to this code would determine the 'Look' of the footer like the grey background etc.

Now just above ]]>

 place the following code:

/*----- BloggingeHow Multi Column Widget (Red Border) START -----*/

#lower { 

margin:auto; 

padding: 0px 0px 10px 0px; 

width: 100%; 

background:#333333; 

} 

#lower-wrapper { 

background:#333333; 

margin:auto; 

padding: 20px 0px 20px 0px; 

width: 960px;

border:0; 

} 

#lowerbar-wrapper { 

background:#333333; 

float: left; 

margin: 0px 5px auto; 

padding-bottom: 20px; 

width: 23%;

text-align: justify; 

color:#ddd; 

font: bold 12px Arial, Tahoma, Verdana; 

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; 

border:0; 

color:#ddd; 

text-transform:uppercase; 

font: bold 14px Arial, Tahoma, Verdana; 

} 

.lowerbar ul { 

color:#fff; 

margin: 0 auto; 

padding: 0; 

list-style-type: none; 

} 

.lowerbar li { 

display:block; 

color:#fff; 

line-height: 1.6em; 

margin-left: 0 !important; 

padding: 6px; 

border-bottom: 1px solid #222; 

border-top: 1px solid #444; 

list-style-type: none; 

} 

.lowerbar li a { 

text-decoration:none; color: #DBDBDB; 

} 

.lowerbar li a:hover { 

text-decoration:underline; 

} 

.lowerbar li:hover { 

display:block; 

background: #222; 

}

/*----- BloggingeHow Multi Column Widget (Red Border) END-----*/

Now that you have added the CSS part for the footer widget, we have to add the HTML code of it. So for that, search for 

 again and add the the following code just above it.

 

 

 

 preferred='yes'> 

After applying this code, when you would go to the Design view, you would see the following type of widget holder at your footer.

So thats all! Finally save the template.

Step #3: Customization (Optional)

Now although your widget would be working fine after implementing the step 2, but in case you wish to add or remove any column from the above widget you can follow the steps below.

To Change The Width Of The Footer Widget

To add another column, you need to increase the widget of the footer widget. So for that, you need to change width: 960px; value.

To Increase The Column

To increase the column, simply add the following code just above 

code:

Once you have added the above code, make sure to change Column # to new column name (like column 5).

Now as i mentioned before, that when you would add the new column, you need to reduce the widget of each individual column. So for that, you have to change the following code width: 23%; to width: 17%; 

So yeah! Thats pretty much it. Hope you found it easy to implement the widget to your blogger blog. In case of any problems, simply comment below and i would get back to you as soon as possible.

source http://www.bloggingehow.com/2012/02/add-4-column-footer-css-hover-effect.html