Some Tips to Improve Your Blogger Sidebar

Here are some basic things you can do to switch your Blogger blog's sidebar up a bit.

Hide Label Count
Some Blogger layouts will show your label/category posts with a number next to them, like this:

Label Here (2)

To remove the number and create a cleaner list, simply follow these directions:

Click on the Layout tab. Click Edit HTML. Click the check box to Expand Widget Templates. Then, click somewhere in the editor, hit Command-F to bring up a window which allows you to search for a particular piece of text. Type in this:

<span dir='ltr'>(<data:label.count/>)</span>

Now, when your editor highlights that piece of coding, delete it. Click Save and your label count should be gone!

Add Background Color to Sidebar

This should be fairly easy.

Go into your Edit HTML section as we did last time. Search for this: #sidebar-wrapper or #sidebar (you will have one or the other depending on the template you are using) and add a background color style like this: background-color: #000000;

When finished it should look something like this:

#sidebar {
  width: 185px;
  padding-right: 20px;
  font-size:11px;
  background-color:#000000;
  margin-top:-50px;
  float: $endSide;
  color: $sidebarTextColor;
  word-wrap: break-word;
  overflow: hidden;    }

Add More Space Between Sidebar Widgets
Follow the steps above to get into your Edit HTML section. Search for this code:

.sidebar .widget {
  margin-top: 12px;
  margin-$endSide: 0;
  margin-bottom: 33px;
  margin-$startSide: 0;
  padding: 0;
}

And change the margin-bottom to however many pixels you would like to separate your sidebar widgets. On our blog, we are using 15px. You can change this depending on your preference.