Clean up your sidebar!

See my blog-list widget over there? I don't like the 25-page lists that you get, but I also don't like limiting my list to only show the most recently modified blogs because the method that blogger uses to find feeds doesn't pick up the feed that Maggie uses. And I want her blog to show up, because she's one of my favorite bloggers.

So I did some digging and found that the code to make my blog-list scroll is really easy. If you are on the new blogger, using XML templates, you can do it too. (If you have widgets, you are using XML).

So now Maggie may show at the bottom of my list due to the feed issue, but at least she shows! Which is good reason to scroll to the bottom of my list. You don't want to miss reading Maggie. :)

Here's how you can make your widget scroll:

• Note the title of your widget that you want to edit.
• Go to your layout tab.
• Click "EDIT HTML" tab.
• Before starting to change anything, you may want to back up your current template, just in case something goes wrong. Click "Download full template" and save the file somewhere on your system. If you don't like what happens below, you can always browse for that file and upload it again, and your template will be returned to starting condition.
  

Now, let's get started with the edits.

• Check "Expand Widget Templates" located at the upper-right corner of your template code.
• From your browser menu bar, choose "EDIT" then "FIND" (or Ctrl-F), and search for the title of your widget. (In my case, I searched for "Endorsed" because I wanted to edit the "Endorsed Drivel" widget.)
• You should find a line starting the widget, that looks something like this and that contains the title of your widget (my title was Endorsed Drivel, so this was the line I needed).
  

b:widget id='BlogList1' locked='false' title='Endorsed Drivel'

• Look down a few lines below that line and you should see a line that looks something like this:

div class='widget-content'

• Note what the class is named. Mine, as you can see, was 'widget-content'. What you change will change EVERYTHING that uses the same class, so unless you want ALL of your widgets to scroll, you need to rename it to something your blog doesn't use yet. Remember what it was named befpre, because nest you have to search for other places that is used. I named mine 'widget-content2' and it looked like this.
  

div class='widget-content2'

• Next search your blog for the class name you just found with a period before it, starting from the top of the code. I searched for .widget-content and found the following section. Yours should look something like this too.

.sidebar .widget-content {
margin: 0 5px;}

• Copy the entire segment of code beginning with the dot and ending with the right curly bracket. Paste it right after the code you copied from. Your code now looks like this:

.sidebar .widget-content {
margin: 0 5px;}
.sidebar .widget-content { margin: 0 5px;}

• Change the name of one you just pasted to the new name you assigned in the first step, and add two more lines of code as shown below.

.sidebar .widget-content {
margin: 0 5px;}
.sidebar .widget-content2 {
margin: 0 5px;
height:200px; overflow:auto;}

• And that's it! You just created a new class and told your widget to use that class definition. Preview to make sure it looks right (the scroll will show but not be functional in preview mode), and then save it.
  
• You can change the height of your scrolling area by increasing the 200 to 300 or whatever you want.

Hope that explanation is clear, but if not, just ask.

And next time I'll tell you how you can make your labels show in a drop-down menu instead of another 25-page list.