Nofollow?

This bookmarklet inserts a tiny bit of CSS into the top of the page you're currently viewing. The CSS is similar to that which is used in other nofollow highlighting methods:

Try it out on a page with nofollowed links!

By the way, this bookmarklet also works in Opera & Firefox (but there are simpler ways to handle it in Firefox).

Adding this kind of markup to your site is pretty easy to do.

1. Download the script and the nofollow image.
2. Open the script file in a text editor (Notepad is fine) and adjust the settings on top:
   Select code
   JAVASCRIPT:

   1. // settings, modify as desired
   2. var myInfoPage ="http://domain.com/nofollow-info.htm";        // local page with nofollow information
   3. var myNofollowImg = "http://domain.com/images/nofollow.gif";        // source of nofollow image (check for full path!)
   4. // warning must be html-formatted
   5. var myWarnMsg = "Beware: this link is potentially bad or not trusted! Click here to find out more.";

3. Upload the script and the image (place the image in the path you specified in your script), don't forget to create your informational page for the nofollow (I'm just linking to my nofollow-policy page).
4. In your template, right before the closing "</body>" tag, add a reference to the script. In a Wordpress theme you would add this to your footer.php, eg:
   Select code
   HTML:

   1. <!-- nofollow highlighting -->
   2. <script src="<?php bloginfo('stylesheet_directory'); ?>/highlight-nofollow.js" type="text/javascript"></script>
   3. ... </body> ...

5. Refresh your browser and check the results. I have a local test page which shows it in action (and here's a nofollow'ed link thrown in for good measure).

Currently the code only adds the image and underline to links that contain a text anchor. This means that links with only an image as the anchor are not modified (but the CSS nofollow highlighting will still be displayed, so be careful if you use that and have image-only links with rel=nofollow). The code was tested on IE 6 and 7.0, Opera 9.01 and Firefox 2.0.0.5.

The code removes the rel=nofollow from the displayed page (it still remains in the static page) so that the different kinds of nofollow markup (including those you might have installed in your browser or with a browser plugin) do not create conflicts. Just to be sure: this script does not change anything on your actual pages, it only changes how the page looks to the user. A search engine crawler would not see these changes.

Advanced users can modify the markup that is added to each link, perhaps even use it to open a floating window on top of the current page instead of going to a separate page.

Current version is v1.0 - 2007-07-28

1. Make a backup

   Before you change anything, always make a backup of your theme files and perhaps even of your full Wordpress installation. It never hurts to have too many backups .

2. Download the script

   Download the file textresize.js from here. Put it on your desktop or someplace where you can find it.

3. Check your Wordpress theme

   You might be able to skip this step, depending on how your Wordpress theme is made. Open your blog in your browser, use "View Source" and take a quick look at the source code (not too long, it could make your head spin). You should find a section pretty much on top which "wraps" your whole site in a "DIV" element. Often it will be called "wrapper", "content" or "container". It will look something like this:

   Select code
   HTML:

   1. <div id="wrapper">

   If you find multiple names that you believe could be the main elements, you might want to try them separately to see which one works best. The default in the code is "wrapper".

4. Update the script to match your theme

   If your theme does not use "wrapper" as the ID of the main element, you will need to adjust the javascript file. Don't worry, it's not painful . Open your copy of "textresize.js" in a text editor like Notepad. You will find the following line near the top:

   Select code
   JAVASCRIPT:

   1. var ts_styleElement="#wrapper"; // the ID of the content DIV that you want to resize

   Change that line to match your main element, eg:

   Select code
   JAVASCRIPT:

   1. var ts_styleElement="#content"; // the ID of the content DIV that you want to resize

   Save the file before a cat walks across your keyboard.

5. Upload the script to your server

   Copy the modified file onto your server into the current theme folder.

6. Update your theme files

   Add the following to your header.php in the bottom of the "head" section:

   Select code
   HTML:

   1. <script
   2.    src="<?php bloginfo('stylesheet_directory'); ?>/textresize.js"
   3.    type="text/javascript"></script>

   Now add the following wherever you wish to see the resize links:

   Select code
   HTML:

   1. <script type="text/javascript"><!--
   2.     showReadabilityMenu('Resize text:');
   3.     //--></script>

   I have placed this in my header.php, right after the "searchform" include.

7. Optionally add more styling

   You can style the line with changes to your CSS file, eg:

   Select code
   CSS:

   1. #header #fontsizemenu
   2. {
   3.     padding-top: 2px;
   4. }

   
   This will depend on your theme and on what you want to do to integrate the links.

8. Test, test, test

   Be sure to test the new functionality in the major browsers. I have tested the code in IE 6.5, IE 7.0, Firefox 2.0 and Opera 9.0. The code depends on javascript. With javascript turned off, the user will not see anything.

Have fun!