Footer With Multi Column - Blogger Template

Did you ever want to have your blog having 2 or even more column on its footer but you couldn't realize it ? Or, you wish you had your blog having 3 columns, one column for your blog posts and the two for your widgets ? "Well, here i'll try to help you to realize all those your wish. I mean, for now i'll help you to make your blog having a multi column on its footer only, whereas for multi sidebar column i'll tell you in another post. :)

It's not realy something difficult, complicated, or even impossible to make such a blog, cuz actually there is no one that can't be done. Well, let's just stop this bullshit and go down to the bussiness..

1. Login to your blogger.
2. Go to design.
3. Edit html.
4. Up to you whether or not you tick the expand widget template, cuz it'd make no sense.
5. Download or copy your entire html for back up so if you make any unexpected thing you could still set your template back to your old design.
6. Find the following code inside your template: ] ] > < / b : s k i n >
7. Now copy the below code and put it above the code that you just found:

/* New-footer-wrapper ---------------------------- --------------------- */ #new-footer-wrapper { width: 100%; position: relative; float: left; background:#fff; border: 1px solid #ddd; padding:3px; } #new-footer-wrapper1 { float:left; width:30%; margin:1px; background:#fff; padding:3%; } #new-footer-wrapper2 { float:left; width:30%; margin-top:1%; margin-bottom:1%; background:#fff; padding:1%; } #new-footer-wrapper3 { float:left; width:30%; margin:1%; background:#fff; padding:1%; }

To be the lesser arrangement like the following:

/* New-footer-wrapper ------------------------------------------------- */ # new - footer - wrapper { width: 100%; position: relative; float: left; background:#fff; border: 1px solid #ddd; padding:3px; } # new - foot er - wrapper1 { float:left; width:30%; margin:1px; background:#fff; padding:3%; } # new - foo ter - wrapper2 { float:left; width:30%; margin-top:1%; margin-bottom:1%; background:#fff; padding:1%; } # new - foo ter - wrapper3 { float:left; width:30%; margin:1%; background:#fff; padding:1%; } ] ] > < / b : s k i n >

8. Getting done? Find the following code: < div id='footer-wrapper' >
< b:section class='footer' id='footer' / >
< / div >

9. Put the below code beneath it:

<div id='new-footer-wrapper'> <b:section class='footer' id='new-footer-wrapper1'/> <b:section class='footer' id='new-footer-wrapper2'/> <b:section class='footer' id='new-footer-wrapper3'/> </div>

The code should look like the following: < div id='footer-wrapper' >
< b:section class='footer' id='footer' / >
< / d i v >

< div id='new-footer-wrapper ' > < b:section class='footer' id='new-footer-wrapper1' / > < b:section class='footer' id='new-footer-wrapper2' / > < b:section class='footer' id='new-footer-wrapper3' / > < / d i v >

10. Save your change and check if you can add gadgets to your new template through the add gadget button on the page design.

Feel free to contact me if you confront any trouble. I'm not an expert in html code at all, just, to me it's something chalenging to try to fix it that you ask my help. You know where you can ask me..