Wednesday, March 2, 2011

Archiving Blogs by Topic in Blogspot

Since this blog is about my various, simultaneous research and teaching projects, I felt it would be nice to archive my blog posts by topic instead of by date. Here are the steps I took...

Blogspot gives you the option to put an archive gadget on your blog that organizes your posts by date (Design | Page Elements | Add Gadgets). The gadget is even editable! Unfortunately, it only lets you change the order and the dating style, not the overall organization. So: to Google.

Blogspot lets you edit the HTML code of your blog, so I thought I could put in an HTML table, giving a column to every topic with hyperlinks to my various entries. Also, I recollected that HTML tables were pretty aweful to work with, pages that have them do not show up in Google, and that instead, one should use "div" tags and Cascading Style Sheets (CSS).

It was BloggerBuster that got me headed on the right track, as he had done something similar on Blogger. Unfortunately, this did not work in Blogspot. The divisions kept stacking one on top of another instead of resting side-by-side as they should. After a little more searching, I found a site by positioniseverything.net. About a fifth of the way down, they have a piece of code that suggests the use of a container division. So, implenting the container division, I came to find that the colomns were resting side-by-side, but were also offset by a carriage return. Back to Google.

Eventually, I found a informational tutorial site by YourHTMLSource that gives instructions on how to use style sheets. The best way is to create a .css file that can be linked or imported to each particular page that you crease so that you do not have to format each HTML tag individually. Another option is that in the section you can create classes and ids that can be used throughout a particular page. The HTML editor in Blogspot, however, does not give you access to the source code (no access to the to import or define classes and ids). Instead, I had to look around and find what to include in the tag.

No matter what I tried, nothing seemed to work, so I switched over to the "Compose" tab, made some changes, and saw how it affected the code under the "Edit HTML" tab. Turns out, I needed to use a CSS class unknown to me and also include the "span" tag to keep everything even.

I decided to put my "Archive by Topic" post on a new static page instead of posting it as a blog entry (Edit Pages instead of Edit Posts). Now, there is a link to my "Archive by Topic" archive page on the main page of my blog above the archiving gadget! It is still a work in progress, but after a few headers (h#) unordered lists (ul), and hyperlinks (a href=" ") it is there for you to check out.

I also created a public Google Doc for everyone to see/copy the code.

Drawbacks

The only drawback to this is that every time you post a blog, you have to go to the static page and code in a new hyperlink to the particular page. This is a bit stinky because, without being able to import a .css file or create a class in the header, the (div style=" ") tag needs to be changed in order to keep everything organized. This makes having multiple divisions almost as bad as having an HTML table.

If anyone can figure out a better method, email me or leave a comment.

No comments:

Post a Comment