Not dreaming tonight.

I took a little nap yesterday afternoon and then lay awake all night. Sometime around 3 AM, I decided to make a three-column Blogger template. Fortunately I ran across The Rounders Three-Column Mod. I downloaded the sample and got some late-night inspiration.

I couldn't just upload Vin's sample because I want to keep my widgets. Instead, I inserted a second sidebar. It's identical to the original Blogger sidebar.

#rightsidebar-wrap {
width:240px;
float:left;
margin:15px 15px 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

I placed the right-sightbar divs in the body, just before the footer.

<div id='rightsidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
</b:section>
</div></div>

</div>

Next, I widened #outer-wrapper to 995px. I had to widen the rounded corner images for the header and footer to 995px also. I linked to the resized corner images in the #header and #footer definitions.

The new sidebar fonts were all funkified, so I added some definitions right after #sidebar.

#rightsidebar-wrap a {
color: $bottomSidebarLinkColor;
}
#rightsidebar-wrap a:hover,
#rightsidebar-wrap a:visited {
color: $bottomSidebarVisitedLinkColor;
}

While making changes, I previewed the blog several times. Just to make sure things were going as expected. I saved the template and then moved widgets around in the wireframe editor. That's all there is to it.

Four short digressions... I learned these tips on Blog U and Blogger Tips. Very useful!

1. I stored my 995px-wide corner images and favicon on Ripway.
2. The favicon links come right after the head tag.

   <link href='http://h1.ripway.com/sf12/favicon.ico' rel='shortcut icon'/>
   <link href='http://h1.ripway.com/sf12/favicon.ico' rel='icon'/>

   
   
3. You can show/hide the navbar by placing this code after the head tag.

   #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
   #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

4. Type special characters (e.g., < >) in posts by using the ISO Entity Name.