Friday, May 18, 2007

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:

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:
<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>

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

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:
<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>

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.


Darren Cronian said...


Great post. I was wondering if you can change the title on the labels, so that you don't have tons of labels in Google with the blog name.

For exampel I have a label called 'amsterdam' I want the label meta title to be 'amstermam'

Can you change this easily?

Tips 4 Blogspot said...

@Darren - Probably not. When it comes to labels, there is not much control with any of the Blogger platforms that will allow you to do this.

Perhaps with Classic FTP, but that would require your own Domain and a little bit of Php scripting to 'filter' the label name and make the transition.

Outside of what I described in using those labels and applying your own 'keyword text' for SEO purposes, there is not much you can do. You could also use the title='a more descriptive text' as an attribute to that link -- just do not get too spammy with it.

. said...


Thanks for this.

Ed Mahony

DanieL said...

thx alot for the info! i've use it on my website, now it enable ppl to browse by category i specified.

really thx!

Computer TNT (Tips and Tricks)
- The Technical Websites for the Not-So-Technical People!

earthlingorgeous said...


Hey thanks for this post I will try doing this I always wanted to add categories in my blogs to organize topics.

I hope it works and I don't screw things up :)


I am Muthusamy R, a blogger. I have gone thro' this post with interest. Thank you for your great post. Fine I have followed and completed the steps. Thge Categories appear on my side bar. But linking to label has not taken place. Oleas suggest me how to link? My blog URL:
Kindly instruct me how to proceed

My mail ID:

Ronnie T. Dodger said...

@Muthusamy - You are almost there. You just need to add the label name to the Url of your links.

For example, your category link for Bujangam should look like this:

<a href="/search/label/Bujangam">Bujangam</a>

pojan said...

hi, just wondering how you create the heading "CATEGORIES2 on the top of it? I'm just getting the small heading of the something like "Blogger Style" followed by the subheading. Thanks

Tips 4 Blogspot said...

@Pojan - If you view the source code you can see how this was accomplished. I basically used an H3 heading tag with seperate Unordered Lists (UL) for each sub-category list.

I see that you have already used this on one of your blogs. Good job.

pojan said...

thanks man. i got the idea on how to put the heading. but after a while i think i dont need one...maybe for the time being. thanks for the excellent tips

raj said...

very useful. I will add to my blog

Mark said...

Interesting article. I write about this theme too. For more information about this theme look articles How to create scrollable link list and How to create list of post links grouped by category using RSS (blogspot)