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!
- I stored my 995px-wide corner images and favicon on Ripway.
- 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'/> - 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)} - Type special characters (e.g., < >) in posts by using the ISO Entity Name.
No comments:
Post a Comment