ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!

ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!
One of our followers asked on the post 30 Top Blog Footer Designs that if we could share the footer design of BloggingeHow. I am glad that you guys liked the design.smile

The widget is pretty neat and has CSS hover effects. Hope you would like it.
ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!
So below is the screenshot of what we will be achieving after the we have applied the code to our blogger blogs.

ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!


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.

ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!


Find the following code (Ctrl +F):


]]></b:skin>


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 </body> and just above it, place the following code:


<!-- BloggingeHow Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
      </div>
<!-- BloggingeHow Footer border End-->

Step #2: Adding The Footer Its Self


While you are in the Edit HTML mode, search for ]]></b:skin> 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 ]]></b:skin> 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 </body> again and add the the following code just above it.



<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>


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

ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!


So thats all! Finally save the template.
ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!

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 <div style='clear: both;'/> code:

 <div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column #' preferred='yes'>
</b:section>
</div>
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.smile 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.

Note: The actual widget was shared by MBT. Further customization was done by BloggingeHow.

You may now like to read:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!
ADD 4 COLUMN Footer CSS Hover Effect Widget To Blogger NEW!
http://2.bp.blogspot.com/-_SAi06u1lB8/TzaAtbDySWI/AAAAAAAACgk/6t28vor7v_E/s320/multicolum+footer+widget+for+blogger.png
http://2.bp.blogspot.com/-_SAi06u1lB8/TzaAtbDySWI/AAAAAAAACgk/6t28vor7v_E/s72-c/multicolum+footer+widget+for+blogger.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/02/add-4-column-footer-css-hover-effect.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/02/add-4-column-footer-css-hover-effect.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade