Using an Image as the Sidebar Title

I love the effect of that an image gives as the sidebar title. It is such a simple thing to do. First things first. You will need a suitable image
that you can change the font on. My suggestion would be to make one using GIMP. This may help: Tutorial: custom header for Blogger using GIMP. Save your original (fontless) image as a template for changes you may make down the line to your sidebar. Look. I made one for Links!

OK. We have an image or two ready to go. My title image is for links, so I will show you how to do a widget for links. Open your Dashboard | Layout | Page Elements | Add a page element | HTML/Javascript. Add the following code to the window:

<img src="TITLE IMAGE URL"/>

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

You can add as many links as you want by opening (edit) the widget and adding this code:

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.

Expand/Collapse Sidebar Widget Title

Hi Annie
First I want to thank you for all this info. I spent about three days wondering how to expand/collapse my labels before I stumbled on your blog.

I have a slight problem though.
When I use the title part of the page element, I get a nice big title but it's not collapsable. If I use your code, the collapsable link appears in small text and isn't very visible.

I've put the examples up on my blog - which is at ReviewInk on blogspot.com

The first is your label code.

As you can see, the part entitled "Look at me, I'm collapsable" isn't in fact collapsable.
The collapsable link is actually the one underneath it that reads "Reviews By Author - small collapsable link.

The other part is the regular label listing under "Reviews - By Author" which is what I'd like the collapsable menu to look like.

Hopefully this is making some kind of sense, and I'd be really grateful for your help.
Thanks so much!
Amy


If I'm understanding correctly, you want a +/- sidebar title like my Blogging Tools area in my sidebar.



Each of the five titles marked +/- will expand a list of links. Note - to make it easier, do not expand the widgets templates. Scroll down to your sidebar wrapper. This is how mine looks:

Click for a larger view

Find the CSS style sheet. You will place the following code between the <b:section>and the </b:section>:

<b:widget id='LinkListXX' locked='false' title='+/- YOUR TITLE' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Changes to the above code:

1. XX - the linklists are assigned a unique number. So, if you try to save your template and it says something about two widgets having Linklist3, change the number on one widget.
2. +/- YOUR TITLE - Add the title of your sidebar widget here. You can leave the +/- if you want. It has become the universal symbol for Click here to see more.
   

Save your template and you have an expandable sidebar title.

EDIT: I have had this hack in my template for so long, I forgot to say you need follow Steps 1 & 2 in this post: Hide/Show, Expand/Collapse - navigation element. Those steps are:

First you must enter the following code in your style sheet:

.commenthidden {display:none}
.commentshown {display:inline}

Second put this between the <head> and </head> tags, but not in the style sheet:

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

I'm so sorry, Amy. I hope this clears up your problem!

Add a border to your posts and sidebar

I was wondering if you knew the code you had to place in the HTML so that all of your posts and your sidebar are in separate boxes.


This is a fairly simple task. I'm working from the Minima template, so your template terminology may be slightly different. You will be looking for the sidebar area in your CSS style sheet.

Look for this in your template.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

Then you will replace it with this code:

.sidebar .widget, .main .widget {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

That will give you a nice border around your posts and your sidebar widgets!

A Double Vision Sidebar Title Fix (From My Inbox)

Oh, that was too easy.

But I wonder if you know... It was easy for me to do it on the HTML elements, but if I try to put a title above, let's say, the Archive, I get this dotted red line between the archives title and the archives...

I'm sure it's simple to get rid of the line (it comes with the Minima design), but I kind of like it elsewhere on the blog. My life is so complicated. Can you think of a way around it?


This question was posed to me from People in the Sun. If your template is styled to have any type of division (ie red dotted lines) between your sidebar widgets, here is your work-a-round for Double Vision Sidebar Titles in widgets other than those you paste content in the widget window. As a matter of fact, that is all widgets except for Text and HTML/Javascript, I believe.

Before beginning, backup your template...you always do. Right?

First Step:
Read Double Vision Sidebar Titles and do the first step. Then this will be the second step for all widgets except Text and HTML/Javascript.

Second step:
Open your Dashboard | Layout | Edit HTML. Check Expand Widget Contents. Find the widget in question. In this instance it is Archives. Locate this part of the widget code:

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Replace the red line with the following green line:

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h3>SIDEBAR TITLE</h3>
<h4>SIDEBAR TITLE</h4>
</b:if>

Save template. With those changes, you can see double vision in all widget titles!

See: Double Vision Sidebar Titles (From my Inbox)

Double Vision Sidebar Titles (From my Inbox)

I was wondering if you've written about how to customize sidebar headings? Such as you've done with your very pretty Buttermilk Clouds ones? I'd love to do something similar.

Well, Debbie, I wasn't able to come up with a clean way to do this in blogger beta, but I did a work-around that isn't too bad.

First step:
Put this code in your CSS style sheet between <b:skin><![CDATA[/* and ]]></b:skin>

h3{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 3.2em;
position: relative;
}

h4{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}

Change the colors to fit your template. You can even adjust the size if you want. Play with it to get it just right. Save your template.

Second step:
Open your Dashboard | Template | Page Elements | Add A Page Element | HTML/JavaScript. In this box, you won't put anything in the Title box, but in the Content box you will add this code.

<h3>...SIDEBAR TITLE...</h3>
<h4>...SIDEBAR TITLE...</h4>

Of course, after your new sidebar title, add your sidebar content in the same box below the title.

If you are using a Classic Blogger template, it is easy to do this. Follow the first step by putting that code in the CSS style sheet between the <head> and </head> tags. Then follow the second step but paste that code in your template where the sidebar title is.

UPDATE 03/09/08: See A Double Vision Sidebar Title Fix (From My Inbox)

A Widebar Category Cloud and Sidebar Background Colors (From My Inbox)

Annie, i just discovered you and Girl, you are amazing! N one makes CSS understandable but you manage to :)
I've retired my yummy PSYCHO template because I can't use it with new Blogger and it's impossible to change. So, I learning to design my own and finding your BlogU so great. I have a couple of questions for you, if you have time, before I get started tweaking my template.

1) How did you make your category cloud one big space above the two sidebars?:)

Use a Widebar to hold your category cloud! And while you're at it, set your sidebars apart with a different background color.

2) Could I create background images for the sidebars? Or how would I make them a different color than the main part?

I hope you can answer these, but if not, I totally understand you're flooded with "help me" emails.

Blessings,
Heidi



1. How did you make your category cloud one big space above the two sidebars?

Follow the instructions on this post: A Widebar - Fluid Style which creates a new page element. You can add the label cloud there. (here is how to get the cloud My Category Cloud...Finally

2. Could I create background images for the sidebars? Or how would I make them a different color than the main part?

First, create a Variable definition:

Variable name="sidebarbgcolor" description="Sidebar Background Color"
type="color" default="#fff" value="#eeeeee">

Make the color anything you want.

Second, put the above code in the

/* Variable definitions

area of your template.

Third, to your #sidebar-wrapper add this code:

background:$sidebarbgcolor;

That will change the color of the sidebar.

Rearrange the Sidebars (From My Inbox)

Sometimes a sidebar isn't where you want it. Maybe you want them side by side. Maybe not. You can put them where you want them.

Hello Annie

Thanks for your hard work - I'm a fan here's my problem: I have this blog Indie Waves and I need another sidebar (too much information just for one sidebar) but I cant get the new sidebar to go to the left of the main, I think it's a float issue, but I really cant figure it out.

Heres the code and here is the part that's making me crazy
If you could help me, I'll bake you a pie ;)

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section>
</div>

If you move the following code as I arranged it below, that should take care of it. You end up with sidebar-posts-sidebar

<div id='content-wrapper'>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section>
</div>

You can take this basic idea, and move your sidebar and main in any way you want. Experiment until you find and arrangement that you want.

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 {
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 */
}

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.

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">
<?xml:namespace prefix = b /><b:section class="sidebar" id="postbar" preferred="yes">
</b:section></div>

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!

So, a little something for all you blog template tweakers out there. You know who you are!!

A Widebar - Fluid Style

A 'Widebar' is another sidebar that spans the space of two sidebars, either above or below those two sidebars. Obviously, this only works if your blog is laid out with two sidebars side by side. I have been wanting to use Vivek's Adding a wider-sidebar to your blog ever since I first saw it. I liked the idea of another sidebar to further group my multiple sidebar widgets into a more pleasing, easy to read format. But, the code was 'static' not 'fluid'. For all you fans of the fluid template style (or those who don't know what a fluid template is) see these posts for a review of fluid templates:

• Fluid 3 column Blogger Template
• Blogger Beta - Fluid 3 column Blogger Template

I really wanted that widebar, so I worked on Vivek's hack yesterday to modify it for a fluid template. I had success, much to my surprise. For me, it is always a surprise when my coding works!

To use the code, first read Vivek's post to get a feel of what it about. He has nice graphics to make it easy to visualize.

A fluid template design will expand to fill your reader's computer. Here is a quick re-cap from my other posts on fluid design. Instead of the width being a pixel value, it becomes a percentage. The sum total must be 100%. Now I have four columns...two sidebars, one widebar and the main content. I first addressed the entire content:

• left margin 5%
• right margin 2%
• width 93% (this 93% contains the main and two sidebars)
  

I then assigned these values: (Follow me here. This part is 100% of the above 93%)

• main 50%
• sidebarleft 22%
• sidebarright 22%
• 6% for the space between the columns

Then I broke it down again and assigned this value to my widebar (which is 100% of the left and right sidebar)

• widebar 44%

Before you begin, backup your template or practice in a test blog! To implement this hack on your blog, this is the code you will add to your CSS style sheet (between the <head> and </head> tags):

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#widebar {
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 */
}

Now, in the unexpanded view, find <div id='main-wrapper'>. That is what it was called in my template. In Vivek's it was called content-wrapper. Add this code in that wrapper section:

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Save your template. Go to 'Page Elements' and you will see a new 'Add Page Element' in your widgets. You can create a brand new widget for your Widebar, or drag a widget from one of your sidebars to it.

This hack was modified to work on my template, Minima. With a few adjustments here and there, it should work on any template. I found I had to adjust the padding values to make it fit the way I wanted on my blog.

Blogger Beta - Fluid 3 column template

I'm forging ahead with Blogger Beta experiments. I put in three columns...fluid no less! Once again, thanks to my expertise and incredible knowledge of coding Hans and his post Adding a Second Sidebar to Your Template.

Here are the steps I took:

1. I read Hans post :-)
2. I removed the #sidebar-wrapper
3. I added a #leftsidebar-wrapper and a #rightsidebar-wrapper
4. I made these changes to the #outer-wrapper, #main-wrapper, #leftsidebar-wrapper and #rightsidebar-wrapper

   #outer-wrapper {
   margin-left: 5%;
   margin-right: 2%;
   width: 93%;
   padding:0px;
   text-align:left;
   font: $bodyfont;
   }
   #main-wrapper {
   width: 50%;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #leftsidebar-wrapper {
   width: 22%;
   float: left;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #rightsidebar-wrapper {
   width: 22%;
   float: left;
   margin:0 0 0 25px;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }

I'm no more surprised than you. Just a few more tweaks here and there, and I believe I may be ready to switch this blog over to Beta completely!

Two sidebars in blogger - Part 2

It was brought to my attention that I left out a bit of information needed to make the two sidebars work. If you haven't read Two sidebars in blogger - Part 1, read it first. The part that slipped my attention is buried deeper in the template. You have a section of code that should read:

<div id="sidebarleft"><div id="sidebar2">

Simply add this after all the content in your left sidebar:

<div id="sidebarright"><div id="sidebar2">

Be sure to add a matching </div> for each <div> that is added (that would be two for each sidebar) to close the tags.These are placed at the end of your sidebar code. Otherwise things will get crazy fast. Now you add content to that sidebar as you have before (ie where you want the content to be seen in your blog). Sorry I didn't notice that omission before.

With all that being said, it seems each blog has it's own idea of how it will allow another sidebar to be introduced into the mix. When I added the second sidebar to by blog, it was very simple...cut and paste and it was a done deal. I recently helped a friend add a second sidebar to his blog. He also uses the same template as I, Minima. For some reason, it was extremely difficult. But, after a few glasses of wine and sleeping on it, I managed to make it happen. So, there is no rhyme or reason (at least to me, a person with no training) for why or why not something will work. If you are trying to add a second sidebar to your blog and it is just not happening as you had hoped, email me and I'll see if I can help. Not promising anything, but I do enjoy a challenge.

Two sidebars in blogger -Part 1

One reason I choose the Minima template in blogger is because of it's simplicity and the ease I am able to modify the design. One of the design modifications I made is adding another sidebar.

To get the sidebar in without distorting my header, I first had to add this code to the template. I put it right below the 'header' portion of my CSS sheet.

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(Your header image if you have one) no-repeat top right;
}

Note the text in red is if you have an image in your header, which I do. Otherwise, let that part out.

What is a sidebar?
"
This is from the Blogger Help section...Getting more to the point, many bloggers find that a sidebar running down the page parallel to the main blog is a convenient spot to publish a short biography, favorite links, and other relevant information that you want near (but not in) your blog.
"

The next thing that you need to do is add this code to your CSS sheet:

/* Sidebar Content
----------------------------------------------- */
#sidebarleft ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarleft li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarleft p {
color:#666;
line-height:1.5em;
}
#sidebarleft {
width:200px;
float:left;
}
#sidebarright ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebarright li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebarright p {
color:#666;
line-height:1.5em;
}
#sidebarright {
width:200px;
float:right;
}

I'm sure there are a million different ways to do this. But this was simple and worked great for me, as you can tell.

7/12/2006 Please read Two sidebars in blogger- Part 2 for more information on implementing this code.