Categories!
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 del.ico.us 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 http://del.icio.us and then log in. Once you've logged in go to the top right link titled help at http://del.icio.us/help/ Once you are here you'll see a section that says 'Browser', click on browser buttons which is located at the link http://del.icio.us/help/buttons
4. Drag the graphic titled 'post to del.icio.us' 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 del.icio.us' 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 'http://del.icio.us/tedernst/', change 'tedernst' to your delicious username. That is you should modify it to become 'http://del.icio.us/X/', where 'X' is your delicious username. If your name is 'PIG' then change it to 'http://del.icio.us/PIG'. 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)
Categories: Categories
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 http://del.icio.us/ and log in. Go to the help section like you did in step 3. Under 'Blog Integration' click on Tag Rolls. The Url is: http://del.icio.us/help/tagrolls
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.
<< Home