Adding Parallel Three Column Footer-Top Widgets

How to add 3 more boxes under the main wrapper? This question was posed by my friend San Ad4m OB in a commentary in the post to make a horizontal menu. Perhaps in short, that is, add widgets three parallel columns on the footer (just wrote he .. he .. he ..). For the CSS code in a blogger trick is to be adjusted to your blog template.

Here's a trick bloggers add widgets three parallel columns on the footer:

* Log into your blogger account.
* Choose Layout -> Edit HTML -> check "Expand Widget Templates".

Tip: Before you edit the template, we recommend you reserve an existing template by clicking Download Full Template writings. Then save the hard disk or other storage medium, so if things happen that do not want you already have a back-up to restore it as before.

* Find code ]]> and Copy-Paste (Copas) the following code on it.

Tip: If you look hard, try to press the button F3 on your keyboard. So the menu will appear below the search toolbar browser (Firefox), so you stay put words to search.

/* -- bottom -- */

#bottom {
width:850px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:#ffffff;
border-bottom:#ffffff;
}

#bottom a:link {
color:#006699;
text-decoration:none;
}

#bottom a:hover {
color:#c06000;
text-decoration:underline;
}

#bottom a:visited {
color:#808080;
text-decoration:none;
}

#bottom h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#bottom ul {
padding:0;
margin:0;
color:#333;
}

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1w6GyZt7ESx0eQEjcpQoicTPzjAqrxwMuSPlxUSEEBQhpY1tg1iZ2Ma4PT-uyP3Yy1S0_CXvsdMjeTepBVpd6VoSP7Z87IDVwd5IvEABY7SjtDKifEiB-YgpSQQS2uyNH7PL8l3lO7o/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:260px;
float:left;
padding-left:15px;
}

#bottom2 {
width:260px;
float:left;
padding:0 20px 0 20px;
}

#bottom3 {
width:260px;
float:right;
padding-right:15px;
}

Note:

1. Replace the green code in accordance with the width of your blog template.
2. For variable width in the code # bottom to fit the width of your blog template.
3. For variable width in the code # bottom1, # bottom2, and # bottom3 can you change the width you want, but must pay attention to point number 2.
4. Replace the red code with your blog characters.
5. Especially for code background: url ( "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1w6GyZt7ESx0eQEjcpQoicTPzjAqrxwMuSPlxUSEEBQhpY1tg1iZ2Ma4PT-uyP3Yy1S0_CXvsdMjeTepBVpd6VoSP7Z87IDVwd5IvEABY7SjtDKifEiB-YgpSQQS2uyNH7PL8l3lO7o/s144/Arrobblue.png") no-repeat 0px .17 em; padding-left: 17px; is the code to add blue arrow icon in your text if you use a numbering method, both the numbers and grains. If you're less likely to please remove the code or change the url in brackets with your own icon.

* Look back id='footer-wrapper'>

* Do not forget to save.

Note: Now try you click the Layout -> Page Elements. Now you will see a new widget display in the blog template and you can add some gadgets in it.

In addition to OB will try to explain a little CSS code to modify a variable width (# bottom1, bottom2, bottom3) to fit the width in the code # bottom (code blink).

For example:

1. # bottom (width: 850px;)
2. Tricks width variable changes in the code # bottom1, # bottom2, # bottom3 is by observing the width (padding) is used that is 15px (# bottom1), 20px + 20px (# bottom2), 15px (# bottom3). So the total width which has been used is 70px.
3. Time width (width) is 850px-70px = 780px.
4. Now we just vary the 780px into 3 columns. For example to make the same 3 columns wide, so wide (width) in the code # bottom1, # bottom2, # bottom3 each for 260px.

Congratulations to add widgets three parallel columns on the footer ...
You can see the example in my blog...