Categories in Blogger

I’m not too much of a techie; however I’ve decided to help two friends (him and him) implement categories in their blogspot blogs. Decided I would turn it into a blog post in case anyone else needs some help. 🙂
One really easy way that’s been floating around for sometime now is this one that requires you to copy and paste a bit of code into your template. Its a great idea except that it makes your titles look a tad ugly. BlogFresh has some better ideas. Anyway, here is how I did mine:1. Create an account with here.
2. Sign up for technorati (if you haven’t already) here.So far so good. Now to use this the way I have- you have to ensure that you largely post using the same browser (I use Firefox 1.5) on the same computer– if you use a laptop that’s great.3. Point your browser to and then log in. Once you’ve logged in go to the top right link titled help at Once you are here you’ll see a section that says ‘Browser’, click on browser buttons which is located at the link

4. Drag the graphic titled ‘post to’ to one of the toolbars in your browser. In the picture included with this blog post for example the bit above the Googlebar is a toolbar (The Googlebar is also a toolbar for that matter) and the link when dragged to the toolbar looks like the bit circled in red.

5. Now point your browser to Ted Ernest’s page where he hosts a plain link version of the tag script. You should see a page with nothing but this statement as a link ‘Technorati delicious bookmarklet’.

6. Drag this link the same way you did (step 4) onto your browser’s toolbar. Make sure you can see both the links you dragged. If you’re using Firefox you can create a new toolbar if you are running out of space (like I did) in addition to the ones that already exist.

To do this go to View>Toobars>Customise and click on customise. Click on ‘Add New Toolbar’, and enter a new name for it, call it whatever you like. ‘Blog’ might be a good idea. Once you’ve done this you should see a new blank space on top of the browser window between or below the older toolbars.

From the customise toolbar window (the same one you used to create this new toolbar) you can now drag links onto the new toolbar . What you should do is to click the ‘>> ‘indicator at the extreme right of your existing toolbars to find where you bookmarked (those links you dragged are called bookmarklets) the browser buttons and drag them onto your new toolbar. Now you can see them and click them too.

7. The toolbar where you dragged the bookmarklets now has two things on it. Both are encircled in red in the picture included in this blog post. One says ‘ Post to’ and the other says ‘Technorati delicious bookmarklet’.

8. Now right click the button that says ‘Technorati delicious bookmarklet’. It will bring up a menu. In Firefox this says ‘Properties’. Click on ‘Properties’ or whatever else it is (though similar) in IE or Opera or whatever other browser you are using. The dialogue box that pops up has a field that says ‘Location’, with some complex looking code in it. We need to modify this code to get it to work for your blog.

Here’s how: Somewhere in the middle of the complex looking code (you have to scroll through it) and be careful NOT to delete any of it, you will find this line ‘‘, change ‘tedernst’ to your delicious username. That is you should modify it to become ‘‘, where ‘X’ is your delicious username. If your name is ‘PIG’ then change it to ‘‘. Click OK.

9. Now time to test this. Browse to your blogspot account and click create new post. Write something. Now click on the bookmarklet called ‘Technocrati delicious bookmarklet’ from the toolbar. You will get a prompt that will say this: ‘Enter Tags: ‘. Put down keywords and seperate them with nothing other than a space.

The bookmarklet automatically seperates keywords (henceforth called tags) with commas, so you will have double commas if you put commas as seperators. Let’s say you put down the keyword ‘Categories’. Click ok. The prompt will reappear with a bit of code with a lot of stuff includes something like the word span with angular brackets around it .

Highlight this code/text and right click cut or copy.

10. Now in the editor in blogger, there are two views in which you can write a post. The top right of the writing space has a tab that says ‘Edit HTML’. This should be grey with ‘Edit HTML’ in blue. Ideally you should be writing your posts in the ‘Compose’ mode. Click on the tab that says ‘Edit HTML’. If nothing changes you were writing in the HTML mode already.

Once you’re in the HTML mode, scroll down to the bottom of your post (or the top too if you want links to categories to appear there), leave a couple of lines and paste the code you cut in the previous step. Now switch back to the compose mode. Scroll down to where you pasted the code in the HTML mode. You should see something that says this:

(for example)


11. You now have categories and are done with the most complicated part.

12. What you originally wanted was a list in the sidebar that provided clickable links to a listing of all your posts under one common category, right? So now we have to implement something called a ‘Tagroll’, similar to a blogroll. [hat tip: Mario] To do this browse to and log in. Go to the help section like you did in step 3. Under ‘Blog Integration’ click on Tag Rolls. The Url is:

13. Use the slider rules on the page to change the colour and font size to what you want. Change the title to whatever you want (I call mine ‘Categories’) and choose to display the delicious icon if you want (I use it. Its a nice way to say thank you for the lovely service) from the check box.

Choose to sort your display either alphabetically or by frequency (radio button choice). Choosing by ‘frequency’ will make the top category name in the listing the tag that you use most often (mine is ‘Muse’). Under ‘flow’ click the radio button option that says ‘list’ and check ‘Tag counts’ if you want. ‘List’ will make the display of your tags (which we have turned into categories) appear in a vertical distribution and ‘tag counts’ will append numerical ordering to the list.

14. Highlight and copy the bit of code as it appears in the little box below AFTER your list looks exactely the way you want it to in your blog. Technically, you can alter the way your tagroll looks after you’ve inserted the code snippet into your template (because the code externally accesses your settings in your delicious account via javascript), however it helps to minismise the one extra step this way.

15. Point your browser to blogspot. Click on the ‘template’ tab. In the window that you can now see, press Ctrl + A and then Ctrl + C (keyboard!). Open notepad from the start menu (Start>Accessories>Notepad) and in a new file press Ctrl+V.

Save the file with whatever name you please in a location you that you can find, the desktop is a good idea. We just backed up your template. If you ruin your template you can use this to restore your blog to its original state.

16. Go back to the browser window that has the blogger template section open. Scroll down to a section in your sidebar and find where you want to insert the list of your categories. Typically this would be somewhere under this bit of code (please replace words with symbols):

“angular bracket open exclamation mark — Begin Sidebar Left — close angular bracket”

….after the section of HTML that does your archives. At this point if you have no clue what to do, consider registering at bloggerforum and asking for help or chuck it.

17. Paste the bit of code you got out from the delicious page. Click save changes and then publish. Wait for it to finish. Now browse to your blog. You will find a list (it should be empty at this point or with only one category titled ‘Category’ if you did the example) under archives or wherever else you pasted the bit of code in your template.

Once you start tagging your posts the list will grow. Consider taking a look at my HTML source for help on where to place the code snippet in your template. To view the source of my blog– click on View>Page Source. It should open either in the browser or in a text file. You will be able to scroll through this to find where I placed the tagroll code in my template.

18. Now for the tagging. In your blogpot account, click on edit posts. Edit each post (hopefully there aren’t too many or it will take forever) to include tags. How? Once you’ve clicked edit for a post, just click the ‘Technorati delicious bookmarklet’ in your toolbar, add a tag (as fits the content of the post) and cut-paste the HTML and republish each post.

19. Once this has finished, browse to your own blog. Open up each post’s permalink (the date and timestamp at the bottom of each post usually is a permalink) and once the page has loaded click the ‘post to’ bookmarklet in the toolbar. This will make delicious bookmark your posts permalink along with its tags.

20. Once you have done this for all your posts, browse to your blog once more. The tagroll in your sidebar will now contain all the tags you gave to each post in a list. Click on a tag- you will be taken to a delicious page that contains links to all the other posts you bookmarked with the same tag.

A ‘Muse’ link should contain all the posts you have submitted to delicious with the tag ‘Muse’. Now you have effectively categorised all your posts, i.e. you have collected all similarly tagged posts in one page. If you click on a link from the delicious page for a particular tag it will
take you to the permalink of that particular post.

We’re done with categories.

For posts from this point onwards:

Every new post you write henceforth will require two additional taks. One is using the ‘Technorati delicious bookmarklet’ to create tags and cut ‘n’ paste into the HTML mode of your post and only then publish it. Secondly once each post is published submit its permalink to delicious via the ‘Post to delicious’ bookmarklet. If you don’t do this your categories will not work and posts will not remain categorised.

Now a couple of notes:

1. There is a way to automate the task of cutting and pasting the HTML code from the ‘Technocrati delicious bookmarklet’ and that is using Pace Tua’s modified categories script. It has some issues though, which you can read about here.

2. If you use Firefox the better way to implement categories for blogger is through the Greasemonkey hack that you can read about here. I haven’t done this yet, I intend to though at some point.

3. If you do decide to use this method say thanks to the Fresh Blog (see link at bottom of post) from where I have derived much of this how-to.

4. Delicious is a great social bookmarking tool and using it to implement categories is a rather narrow use.

5. A tag labelled ‘post’ and ‘Post’ are different, so use a standard capitalisation throughout or you’ll end up with two categories called ‘Post’ and ‘post’.

6. This method is only good as long as you use one browser and the same computer all the time to blog. If you don’t, consider moving to WordPress which is an awesome CMS with categories already implemented. You can run Word Press from home or use the Word Press hosting service for free.

7. Please back up your template before you do anything. If you mess up, just delete the entire template from the template section AND replace it with the text file you created earlier and you should be good to go.

8. The method I’ve just described also applies to a nifty blog search engine called technorati. If you haven’t heard of it, please do check it out.

9. Doing categories this ways had one distict advantage that I have to mention– it lets you add new categories and tags on the fly. Creativity, you see?! 😀

10. Tagging and categories are in general a great ideas cause they make information easy to find. Happy categories then!

That’s it!


I hope this helps.


One thought on “Categories in Blogger

  1. It’s amazing that Blogger hasn’t gotten around to adding a categories or tagging system onto their platform yet. While workarounds like this are great, they’re not nearly as powerful as an integrated solution could be. And once people get far enough down the road with a workaround, it becomes tough to switch to the real deal. For example, look at how many blogger blogs are running Haloscan comments after Blogger started offering a comments feature.


Comments are closed.