Tuesday's Tips - Lowerbar

For the longest time I wanted to add gadgets at the bottom of my blog, so that my sidebar wouldn't be so full, but I didn't want to have to switch templates. Here is a simple tutorial for how to add a three columns of gadgets at the bottom of your blog.
Feel free to customize the styling to your needs. (html basics for text, backgrounds, borders, padding & margins)

1) Find:

#sidebar-wrapper {

2) Underneath that section of code paste:

#lower-wrapper {
       margin:auto;
       padding: 0px 0px 0px 0px;
       width: 1100px;
}
#lowerbar-wrapper {
     border:1px solid #e6e6e6;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 0px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 10px 0px 10px;}

3) Find:

]]></b:skin>

4) Above that paste:

 /* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:none;
}

.lowerbar h2 {
      margin: 0px 0px 0px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#000000;
      text-transform:none;
      font: 14px Century Gothic, Arial, Tahoma, Verdana;
      border-bottom:1px solid #e6e6e6;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #e6e6e6;
}

5) Find:

<!-- end outer-wrapper -->

6) Above that paste:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Now when you go to add gadgets to your blog there will be three columns at the bottom for you to place them. =)

In Him,