Introducing: the SEO Stylesheet for Safari, Firefox, Opera, and IE

Firefox gets all the cool toys

As I’ve written before, Firefox SEO — not Safari — gets all the glory. One of the great things about Firefox is the Add-ons (plugins) that extend its functionality. For web developers and SEOs, it’s vital to easily see what rank your website has when doing searches. There are tons of Firefox SEO Add-ons, but I use the following Firefox SEO addons:

• SEO for Firefox – The best. Gives you all sorts of info about each listing. Invaluable.
• Google Preview – Get a Snaps.com-like screenshot of websites inline with your search
• GoogleEnhancer – Adds item numbers and favicons to Google search results

These add-ons make browsing much easier when you’re doing some SEO research. There are no cool Safari SEO Plugins (ask Google, it’s true), but I wasn’t satisfied…so I made my own (kinda).

I am pleased to announce the best Safari SEO plugin alternative.

The SEO User Stylesheet

This user stylesheet can be used by all browsers: Safari, Firefox, Opera and IE

I’ve added the top search engines to this stylesheet so that whenever you do a search on any major search engine, the search results will be numbered, including the paid advertising.

Internet Explorer users: the items marked with the asterisk (*) will not work in Internet Explorer. Do yourself a favor and get a good browser.

Search engines included in the stylesheet:

• Google
• MSN/Live
• Yahoo!
• AOL Search
• Netscape.com
• Ask.com *
• AltaVista *
• Snap.com *
• AlltheWeb.com *
• Gigablast.com *

In order to use this stylesheet, you must add seo-stylesheet.css as your browser’s user stylesheet. Here are links that will help you set it up:

Set up a style sheet in:

• Safari user stylesheet setup
• Internet Explorer user stylesheet setup
• Firefox user stylesheet setup
• Opera user stylesheet setup

You can create a .css file using the code below, or download the SEO Stylesheet here.

The SEO stylesheet code:

/*
From http://yoast.com/user-stylesheet-nofollows/
The following styles will show you which links do not pass
PageRank juice.
*/
/* Nofollow links */
a[rel~=nofollow] {
background-color: pink!important;
color: black !important;
font-weight: normal !important;
text-decoration: underline !important;
}

/* Nofollow images */
a[rel~=nofollow] img {
border-bottom: 3px solid pink !important;
}

/*
From http://katzwebdesign.wordpress.com/?p=333
The following styles will number the search engine results for
easier SEO searching.
*/

#gsr li, /* Google */
#sw_page li, /* MSN Live */
#ysch #results li, /* Yahoo! */
.results .MSL li, /* AOL Search */
#grid .w .expander li /* Netscape.com */
{
list-style: decimal inside!important;
}

#grid .w .expander li span.map_venname /* Netscape.com */
{ color:white; text-indent:-1.5em; }

#results, /* AltaVista */
#teoma-results, /* Ask.com */
#webResults, /* AlltheWeb.com Paid */
.resultWell, /* AlltheWeb.com Organic */
#mainframe #results2, /* Snap.com Organic */
#mainframe .sponsored-results, /* Snap.com Paid */
#mainframe #search-col2, /* Snap.com Paid */
td.feed table.results /* Gigablast.com */
{
counter-reset: section;
}
#results a.res:before, /* AltaVista */
#teoma-results a.L4:before, /* Ask.com */
#webResults p.result:before, /* AlltheWeb.com Paid */
.resultWell p.result:before, /* AlltheWeb.com Organic */
#mainframe #results2 h3.result_title:before, /* Snap.com Organic */
#mainframe .sponsored-results h3.result_title:before, /* Snap.com Paid */
#mainframe #search-col2 h3.result_title:before, /* Snap.com Paid */
.feed table.results table.result .result-title:before /* Gigablast.com */
{
content: counter(section) ". ";
counter-increment: section;
}

/* Disabled the animation, makes the +1 button lighter yet full brightness on hover */
.esws, .eswh { background-position: -300px 0px!important; }
.eswh:hover { background-position: -400px 0px!important; }


Search engine screenshots using the SEO Stylesheet

Hope you enjoy! Leave feedback, issues, and suggestions below.