BlogWell

You may have seen this symbol  next to links on various pages of the Web. It denotes that the link (which is usually placed before the symbol) is an external link.

If you’ve ever wanted to differentiate internal links from external links on your blog, there is a fairly simple way of doing it, and all it requires is a few lines of text added to your stylesheet.

In this post, we’ll show you how to do it.

Why differentiate between internal and external links?

Today, most people scan, they don’t read the full text of a blog. By representing your external links visually, visitors can see – at a glance – that you’ve given them quick access to relevant and related content that is not solely on your site. This is significant because the easier you make it for your visitors; the more information you supply, the more likely they are to subscribe to your RSS feed, or return to your site next time around.

How to differentiate between internal and external links on your blog

You won’t need to change anything on your existing posts; you’ll just need to make a few small changes to your style sheet.

This change will automatically update every post you have ever written.

Step 1: Copy the ‘external’ Image File

You need to copy the image file, external.gif, to the images sub-folder within your current WordPress theme folder.

Step 2: Add ‘external’ Image to Links

To create links that appear within posts as:

Add the following to your style sheet:

a
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}

The right padding value of 12 pixels ensures that the image does not overlap the text of the link.

Step 3: Differentiate Between Relative and Absolute Links

A handy feature of CSS is that you can apply a style not only to a HTML tag, but optionally based on the contents of any of the HTML tag’s attributes.

For example, to apply the above style to only those link references which contain “http:”, you modify the style sheet entries as follows:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}

But this is only useful, if links to other posts are relative and not absolute links. An example of a relative link is ‘<a href=”another-post”>…</a>‘; whereas, an absolute link is ‘<a href=”http://blog.example.com/another-post”>…</a>‘.

Step 4: Exclude Absolute Links to Your Blog or Web Site

Now WordPress always uses absolute links. So to ensure that any link to your own blog or Web site does not have the external image applied, you follow the above style with entries which undo this change. The entries are specific to domain name of the blog or Web site.

For BlogWell, all our links start with http://blog-well.com. You will need to replace “http://blog-well.com” in the entries below with the domain name of your blog or Web site:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
} 

Step 5: Add a Class to Exclude the ‘external’ Image

Sometimes you may want some links which go outside of your blog or Web site to not have the external image applied. You can do this on a case by case basis by using a link class of ‘noexternallink’. Within your post you would write the link as:

<a class='noexternallink' href='http://example.com'>Example</a>

And the style sheet would contain:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Note than ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="http://blog-well.com"]‘ are separated by a comma. This is very important, since it ensures that the background of none and right padding of 0 pixels are applied to both ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="http://blog-well.com"]‘. If you forget the comma, then it will only be applied, should ‘a[href^="http://blog-well.com"]‘ follow a ‘a.noexternallink[href^="http:"]‘.

Step 6: Exclude ‘external’ Image from Header and Footer Items

Within BlogWell’s theme we did not want any links within the header or footer to use the external image. Our theme uses the DIV HTML tag to identify the header and footer, and use the ID values of ‘header’ and ‘footer’ for each respectively.

<div id='header'>
...
</div>
...
<div id='footer'>
...
</div>

Without having to change all the links within the header and footer to use the ‘noexternallink’ class for links, we can easily prevent any links within the header and footer DIVs by using the following:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 7: Exclude ‘external’ Image from Sidebar Items

If you didn’t want the external image to be applied to any links within any of the sidebars, you can do the following:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
#sidebar a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 8: Include Both Normal and Secure HTTP Links

If you use Secure HTTP, then your links will start with “https:”. To handle either standard HTTP (http://) or Secure HTTP (https://), then the above style sheet entries would be:

a[href^="http:"], a[href^="https:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="http://blog-well.com"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 9: Review Padding Styles for Existing Links in Your Theme

A word or caution, as now links within the blog or Web Site will have a right padding of 0 pixels. If your theme explicitly sets the right padding for some items, then you will need to mark these settings as important which will ensure that value is used instead of the new value of 0 which is set in the above style sheet entries.

For example, BlogWell’s menu in the header, uses links which have a right padding of 20 pixels. So after adding the above entries to our theme’s style sheet, our menu appeared as:

The style entry which sets the menu’s right padding is:

#topnav ul li a
{
  padding-right: 20px;
}

CSS allows style sheet attributes to be marked as important, which means they will not be overridden by other style sheet entries. We can use the “!important” tag to ensure that the right padding of 20 pixels is used rather than it be overridden by the 0 pixel padding of our external link entries.

#topnav ul li a
{
  padding-right: 20px !important;
}

Our menu is now restored to its correct state:

Step 10: Review

To highlight external links within your blog or Web site do the following:

1) Copy external.gif to the images sub-folder of your current WordPress’ theme folder.

2) Add the following lines to your style sheet:

a[href^="http:"], a[href^="https:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="http://blog-well.com"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

3) Review your style sheet to see if any entries explicitly set the right padding value, in which case you may need to mark them with the “!important” tag.

A Final Word on Browsers

Should the link wrap around to a new line, Mozilla Firefox will display the external image correctly, following the end of the link on the new line.

 

However, Microsoft Internet Explorer will display the external image incorrectly at the end of the first line without any margin so it overlaps the text.