Hacking Blogger with Add-ons

Firefox is the best browser available.

Period.

Here's a little demonstration of this fact.

The things that make Firefox so powerful are the Add-ons. And if you do any kind of web development, you need to get Web Developer (in addition to the givens of NoScript and Adblock Plus). Web Developer does two things I'm going to talk about here:

1. It lets you see what elements are being changed by what code. By pressing Control (Command on a Mac) and Shift and Y, you can move your cursor over an element of a web page and see the CSS that modifies it. For instance, this little text block generated the following information:


#readerpublishermodule0

Armed with that knowledge, I can click the little CSS drop down box, and...

2. Edit the web page on the fly to test out changes, and then paste the code into my web site when I have it working how I want.

So very cool.

But after fiddling with one of my blogs today, I couldn't get the code to work. If I made the changes I wanted, it changed every DIV instead of just the one I was working in. I stared at my code, but I couldn't see my problem.

#readerpublishermodule0 .s a,a:hover {
color: #777;
text-decoration: none;
}

This code is telling the site that for everything within the "readerpublishermodule0" DIV and the "s" section within that, the links should be gray and not underlined both normally and when you hover over them. And this worked great... but it was breaking all my other links as well so the rest of them were the same way (which I didn't want).

I finally got one of my coding buddies to look at it for me, and he pointed out that I couldn't just separate the elements with a comma (like I had with the "a,a:hover") because the comma reset the whole thing back to the global website level... that's why all my links were wrong now.

By simply updated the code like this:

#readerpublishermodule0 .s a,#readerpublishermodule0 .s a:hover {

I was able to get everything working correctly.

And that is how the Web Developer Add-on for Firefox helped me hack my Blogger blog... with the help of someone who knows much more about code than I do <smile>.

 ~Luke Holzmann
Your Media Production Mentor