Adding pseudo Categories to your Blogger sidebar (New Layouts)

Applies to: New Layouts
Working with: Page Elements

Note: I will be following up with a version for Classic Templates shortly.

Labels are great for identifying what your posts are about. They are to posts, as META keywords are to web pages. As such, they tend to get to a point of overflow if we are not consistent with are spelling or we use them in a spammy manner.

Don't get me wrong, labels have a purpose. Just not on the sidebar. As your list of labels grow increasingly bigger, so does the sidebar -- and that can be a mess.

In this tutorial, I am going to show you how to use labels to produce a pseudo-Category List for your sidebar. Accomplishing this technique is fairly easy to do, but the planning and follow-through will take a little determination.

Choosing your categories wisely

Categories are broad stroked themes for your blog and should be hierarchical in nature. You need to determine what your main theme is and break it down into sub-areas of interest.

For this blog, I am dealing with two versions of Blogger -- Classic and New. Look at my categories in the sidebar and that will top the list. With both versions of Blogger, I will be looking posting methods, layouts/templates, settings, and some misc stuff, so I created sub-areas of interest concerning those themes. The categories are not etched in stone however, and can be changed easily at any time.

Creating a label for your category

If you have not used labels before or a label does not exist for your category, it will have to be created.

Existing labels that may fit your category can be adapted and may not have to be created explicitly. Click on the label and see what types of posts get listed for it. If they all mostly deal with the category you have in mind, then it won't have to be created.

Naming your labels should be done in a consistent manner, this is to aid you in remembering them easier when it comes time to post. Make them short, no double words, non-plural. If you this is unavoidable, don't sweat it.

If you need to create labels, the first thing to do is create a new post titled "Categories". Enter a little blurb in the post that this is non-informational and for category setup only. In the "Labels for this post" box, enter in all of the labels you will be using for your categories. Double check them, then publish the post.

This post can be deleted sometime down the line after you have used each new label at least one more time. For right now, we are going to let the garbage post sit there.

We are now done with creation of categories. On to the next step.

Creating the Category Html

We will be writing a little Html code consisting of three tags for a heading, unordered list and list items. Don't worry, it will be easy.

First thing we need to do is capture the link Urls from your labels. Open up the blog in your browser and hover your mouse over the link. Down in the status bar you will see the Url. It should look something like this:

http://webstractions.blogspot.com/search/label/settings

At the end of the url you will be able to see your actual label name. Right now we are interested in the path to your label directory, everything but the label name and the root of your blog Url.

Open up notepad on your computer and type in the following:

<ul>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
<li><a href="/search/label/"></a></li>
</ul>

Note that the href portion starts with a forward slash. This tells your browser to go to the root path of your blog. In my case http://webstractions.blogspot.com

Add as many <li> items as you have categories.

The <a> portion of the Html is your link anchor. At the end of the url (between the slash and quotemark) insert your label names. In my example above, that was "settings".

Put them in the order you want them listed.

The anchor surrounds your "linking text". Right before the </a>, insert what you want that text to read. If you notice on my category list for the style of Blogger, I am pretty descriptive. Be careful not to write a paragraph or two here, short and sweet.

When you are done, it should look something like this:

<ul>
<li><a href="/search/label/basics">Getting started with Blogger</a>  </li>
<li><a href="/search/label/layouts">Using templates and layouts</a>  </li>
<li><a href="/search/label/posting">Handling posts and comments</a>  </li>
<li><a href="/search/label/settings">Settings</a></li>
</ul>

Save your work or keep it handy for the next step. We will be copying that text to the clipboard and pasting it into a widget.

Copying your code to a Text Widget

Go to your blog dashboard and navigate to the Template tab. Click on Page Elements, then Add a Page Element.

In the pop dialog that appears, click on the add to blog button for Html/JavaScript. That screen will change to an input form.

In the box labeled Title, enter in "Categories" (or whatever you want).

Copy the code you wrote in Notepad and paste it into the large box labled Content in the widget. If you don't know how to copy and paste, you should learn (go here).

Click on Save Changes.

If all went well, you are back at the Page Element screen and your new widget is sitting at the top of your sidebar. If you want to reposition it, do so now.

Now View your blog. Test all of the links for your Categories out to make sure they are working properly. If there are any bad links in there, go back to your Page Element screen and edit it.

Using your new categories

Make sure that you label every post with at least one of your categories. Two or three labels can be used if they truly fit the category. More than three, then this whole exercise would have been in vain, go back to just using labels.

Remember, categories are for your users. Labels are for tagging the blog bots with. Spam the bots all you want, not your readers.

If you have any problems, drop me a comment. I am available 24/7, except on weekends, bowling night, poker night, mornings of extreme pain from the night before, siesta time, daily constitutionals and sometimes when I am sleeping. Outside of that, I am here for ya man.