How to Add a 3 or 4 Column Footer to Blogger

2011-07-31T12:53:00.000-07:00

This tutorial involves converting your current template's footer into 3 or 4 columns. Converting your footer into columns allows extra room for more content and advertisement, and is a fairly easy tutorial.

Demo Image

To add a 3 column footer to your blog, first find (Ctrl+F) the following section code in your template:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

Example Image

After you find your footer's section code, replace it with the following section code, and click "Preview" to see if you've implemented the code correctly. If your template loaded, you're good to click "Save Template".

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div>

Example Image #2

If you want to add a 4 column footer to your blog, then replace your footer's section code with the following section code instead of the one above. Always make sure you "Preview" your template after you make changes to it to be sure you've correctly implemented the tutorial. If it loads, then you're good to click "Save Template".

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Example Image #3

How to Remove or Hide Blogger's Navbar

2011-07-29T22:55:00.000-07:00

By default, Blogger powered weblogs that are hosted on blogspot.com always has a Navbar (Navigation Bar) that appears on the top of the blog. The Blogger Navbar contains a search box, links to follow or report abuse on your blog, a link to another random blog, a link to create a new post, and a link to go directly to your design page.

To remove the navbar, simply copy and paste the following code right before your body's CSS style.

#navbar-iframe { display: none !important; }

Example Image

Note: To show the navbar, simply delete the code and the navbar will appear again.

Bloggertronics

How to Add a 3 or 4 Column Footer to Blogger

How to Remove or Hide Blogger's Navbar