Blogger Hacks #2: creating pseudo-separate blog feeds

Even as I was asking other students about if other classes would benefit from a Random Absence Mentoring blog feed, I was thinking to myself, "Crap, how am I actually going to do that?" I knew that if we had six classes all on the same blog page, it'd be an unusable mess. Luckily, there are TONS AND TONS of articles about Blogger hacks on the Internet, so I figured out how to make it work. This is going to be a pretty long, detailed post (for Dr. Preston's benefit, since the course blog could use some dropdown menus too *cough*) so I'll put the rest after the jump.

1. First, I sorted all the posts into two categories using labels: "AP English" for the daily posts about the class, and "Random Absence Mentoring" for general announcements and stuff about the blog itself.
2. Then I took the URLs of the label pages and created web-address tabs to link to them. Boom. Mini blog feeds. Done.
3. Then the problem was getting rid of the gigantic "everything" blog feed that was serving as the blog's homepage. I found an article with instructions on how to make a static homepage which served my purposes pretty well. The original static homepage was just an "under construction" disclaimer, but then I changed it. More on that later.
4. However, on each label page there was this ugly gray box TELLING me it was a label page. I didn't like it, so I got rid of it.
5. After that I had a gigantic mess of tabs taking up two lines (so tbh they didn't even look like "tabs" anymore). I was hoping I could create some sort of cool dropdown menu that looked like tabs until you scrolled over them, but I dreaded the JavaScript that I thought would be involved. So, I was happily surprised when I found out that you could do it all with CSS! (Except the linked webite's pre tags are REALLY WEIRD I DON'T EVEN so I actually copied the HTML-encoded code from the source page, pasted it into my favorite HTML test bed [possibly only works in Chrome], previewed it, copied the preview code to get rid of the HTML-encoding, and pasted it back in the test bed. I really don't know why I had to do that.) After that, I used the CSS test bed to customize the colors (and do some minimal editing of widths/padding/margins) to make it match the existing tabs, and the HTML test bed to organize all the links. Once it was all nice and pretty, I pasted everything into Random Absence Mentoring's Blogger skin. I was hoping I could paste the HTML into an HTML/Javascript widget, but apparently you can't put those at the top so I had to paste it directly in the skin below the header. (I didn't want to do that, because one wrong move and you break the entire skin. Oh well.) As for the CSS, I created a new section under the styling for the original tabs and pasted the new code there. After looking at the new and old tabs side by side for matchingness, I deleted the original tabs widget, leaving just the dropdown tabs. Yay.
6. With that done, I had just one problem left. There were two things I really wanted on the main page: first, I wanted some sort of "Welcome" or "About" message, since not everyone who visits the site will automatically know what it is. But I also really wanted the "Random Absence Mentoring" feed on the main page, so if I have an announcement everyone will see it before clicking on whatever blog feed they actually came to read. Luckily, thanks to my study of conditional formatting over the summer (funny story actually, I was complaining to my brother that my blog wouldn't display correctly in IE, but he reminded me that anyone who uses IE isn't going to care how my blog is formatted anyway [y'know, since Internet Explorer has given up]), I knew about Blogger's conditional tags. So, I wrote a message disguised as a "sticky post" and used the tags to make it only show up on the Random Absence Mentoring feed, which I set as the homepage using the process above.

And that's it! My next project is tabbed widgets, but that might not be for awhile. Once I figure it out, I'll be sure to write a post about it!