How To Making Blogger Template Part 4

Posting this time we will discuss the continuation of our previous post. You already know the trick how to make a sidebar. Now we will discuss how to create a footer. Basically, create a footer similar to the way of making the sidebar. The difference lies in the content widget, that's all. Therefore, we suggest you re-read our post about how to making blogger templates, how to making blogger template part 2, how to making blogger templates part 3, css, and html.

---

A. Making Division To Footer

This method is intended to create an area for the footer. Actually, this way is not only apply to footer only, but throughout the territory of your blog. Precisely, the division is like the territory of a country. And css as a government of a country that regulates urban planning. Consider our previous posts while trying to create a sidebar, we also do the same thing.

<div id='footer'> ... </div>
html code

#footer{margin:0;padding:0;overflow:hidden;}
css code

---

B. Make Some Columns Footer

Once you have successfully created a division for the footer, then the next step is to make 2 pieces of the column footer (for example). How to make this also the same as described above. You need to make 2 pieces of division. If you want to make 3 pieces of the column then you must make 3 pieces of division.

<div id='bottomfeet'> <div class='bottomclass' id='bottom1'> ... </div> <div class='bottomclass' id='bottom2'> ... </div> <div style='clear:both'/> </div>
html code

#bottomfeet{width:1000px;margin:0 auto;overflow:hidden;} #bottom1{width:380px;margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;float:left;} #bottom2{width:280px;margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;float:left;}
css html

---

C. Fill Each Columns With The Widget

This method is not always equal between each designer. Sometimes they make a new division, or by giving a specific value on the margin and padding. Consider the following example

<div id='bottomfeet'> <div class='bottomclass' id='bottom1'> <b:section id='bottom-1'/> </div> <div class='bottomclass' id='bottom2'> <b:section id='bottom-2'/> </div> <div style='clear:both'/> </div>
html code

#bottomfeet{width:1000px;margin:0 auto;overflow:hidden;} #bottom1{width:380px;margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;float:left;} #bottom2{width:280px;margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;float:left;}
css code