Postbar - something new!
Here is a new one for you. I'm calling it a Postbar in the spirit of previous 'bars'...ie widebar and sidebar. Applications? Well, I wanted an extender to keep my sidebars from moving to the left on label pages.
To explain a bit, I installed the widebar above the right and left sidebars. When I clicked on a label in my category cloud, if I only had a post or two in that category, that made a short list. Then my left and right sidebar, without any prodding from me, shifted to the left to fill up the empty space under that short list. I didn't like that added feature! I wanted all my sidebars to line up in a row like on my home page.
One solution offered was padding the posts to fill space. (And a very nice suggestion. Thanks, Vivek.) Only that left entirely too much white space for my liking. But, it made my sidebars line up. So, I thought instead of putting white space after my posts, why not fill it with something? Hence the Postbar was invented because it is a sidebar that follows the posts.
If you want your very own Postbar, here is what you do. Add the following code to your CSS style sheet (between the <head> and </head> tags):
#postbar-wrapper {Note: this is for a fluid template design. If you have a static design, plug in your post px sizes. My posts are called #widebar-wrapper in my template. Yours could be labeled differently.
width: 44%;
float:left;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#postbar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}
The following code needs to be added between the <body> and </body> tags. Then find <div id='leftsidebar-wrapper'>. (Again your's could be called something similar.)
<div id="postbar-wrapper">After that, save your template and go to the Page Elements. If it is not lined up under your 'Blog Posts' widget, drag the 'Blog Posts' widget to it, then move it all where you want it. This was a gray area for me. No rhyme or reason...lots of dragging. At one point, it wouldn't let me drag a widget, but I saved it and came back and I could move it. Then it worked!
<?xml:namespace prefix = b /><b:section class="sidebar" id="postbar" preferred="yes">
</b:section></div>
So, a little something for all you blog template tweakers out there. You know who you are!!
Labels:
Blogger Beta,
Design,
Fluid,
Hacks,
Sidebars
4 Comments:
You are wicked smart!
Will try to implement after the holidays.
@janet, Not really...just needed my white space filled up!
hiiiiii im in DEEEEP trouble..
I was trying out some of your hacks, and I dunno wat hppnd!! (I do always download a backup of my template)
# IN dat particular blog, d SIDEBAR has gone away..!!
# ITs dere in my oder/new blogs.
# I can actually see (or feel), the profile links (and oder widgets if I add them) on the bottom right of d page.! It's just invisble. :O
# I hv tried everything, uplaodig my previous downlaoded templates, changing it with some new default templates..but it still remains the same..!!! NO SIDEBAR, no matter wat d template is..
# If I visit one of my post pages, the side bar appears.!!
I knw i sound like some whiner..but that blog was very personal to me, and it luks yuk rite now.. PLZZZ help me out...
thnking in advance,
adi
the link --->> http://sataniclimerix.blogspot.com/
plz plz have a look..
and yeah on better words..MERRY CHRISTMAS!!!
Aditya, I would be happy to help you. But just so you know, my time will be limited until after New Year's. (Christmas and my daughter's wedding on New Year's Eve). So, it may be after the first of the year before I can actually do anything.
Until then:
1. Please send me a copy of your template backup as an attachment.
2. Tell me exactly what you need (I have taken a quick look at your template source, but am unable to see the problem.)
3. If you are able to work it out, let me know
Merry Christmas to you!!!