Highlight External Links & Make Them Open In New Windows

You can highlight external links on your blog or website fairly easily. All you need is a small jQuery script and an even smaller CSS code snippet. And you don't even have to go back and edit your existing posts/pages for it to work.

You can also force those links to open in new windows or tabs if you want to.

Here's how:


1. Tag external links

This simple jQuery script will scan your page for external links (links pointing to different domains/subdomains) and assign them with "external" class name. This script excludes linked images because you don't want them to be highlighted. (Images for Blogger blogs are considered external since they are hosted on blogspot subdomains, other than your blog's domain/subdomain).

  1. If you haven't already added a jQuery library call to your template before, copy the code below and paste it above the </head> tag in your template.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> 
    
  2. Then add this script before the </body> tag.
    <script> 
    //<![CDATA[
    (function($) {
    $('a:not(:has(img))').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass("external"); 
    })(jQuery);
    //]]>
    </script>


2. Highlight external links

external link symbol icon Now that you've added "external" class to all external links, you can easily target (to highlight) them in CSS using "a.external" selector.

On Blogger, go to Template > Customize > Advanced > Add CSS, add the following CSS code and press the Enter key on your keyboard.

  • For a simple highlight, you can just change the text or background color, like in this example:
    a.external {color:red; background:yellow;}
  • Or if you want to use a symbol/icon next to the link, like on Wikipedia and Twitter Developers Site, add the following CSS snippet:

    a.external {background:url("http://3.bp.blogspot.com/-DXJ-d748UZA/UbVbb7pWlKI/AAAAAAAAEiU/zDhsxdTtXRU/s320/Icon_External_Link+12.png") no-repeat right center; padding-right:13px; display:inline-block !important; }

    To use a different icon, simply replace the background URL with that of your icon. You can download free external link icons from Shapes4free.


3. Open external links in new windows

You can make the external links open in new tabs or windows, simply by adding target="_blank" attribute to the anchor tags. This can be achieved by altering the original script slightly, like this:

<script> 
//<![CDATA[
(function($) {
$('a:not(:has(img))').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass("external").attr('target', '_blank'); 
})(jQuery);
//]]>
</script> 

Super easy, right?

Enjoy!

21 comments to "Highlight External Links & Make Them Open In New Windows"

Arham Sukardi June 10, 2013 at 5:19 PM    

Thanks for sharing this tutorial and tips, very useful.

Hi-Flow June 10, 2013 at 7:21 PM    

thank you we love it, it's so useful :)

Greenlava June 10, 2013 at 8:57 PM    

@Arham Sukardi
You're welcome :)

Frank Cern June 11, 2013 at 9:05 AM    

Love the code for the icon. Thanks a lot man.

hafizmd June 11, 2013 at 11:07 AM    

Really super easy. Just copy and paste the code.

But, since you just mentioned about the external link, i need to gali-gali your blog to find out more about it.

thanks GL for sharing it

SEO Tips June 11, 2013 at 5:31 PM    

Hi, Can I implement this technique on my Wordpress site?? If not, please write about it.

Marifel June 13, 2013 at 12:38 PM    

Very helpful! Thanks :)

http://collegemarketing101.blogspot.com/

Marifel June 13, 2013 at 1:06 PM    

very helpful! thanks for this post :)

http://collegemarketing101.blogspot.com/

Oluwapelumi Babalola June 14, 2013 at 7:33 AM    

Thanks really needed that http://godwithmeblogg.blogspot.com

Eintelli June 17, 2013 at 9:48 PM    

Business Proposal Template Software by eIntelli

Anand June 18, 2013 at 8:36 AM    

Any specific advantage of highlighting external link. btw, the implementation is quite easy!

Erwin AW June 18, 2013 at 3:05 PM    

How to make it just show on my article posts ?

Erwin AW June 18, 2013 at 3:06 PM    

How to make it just show on my article posts ?

Erwin AW June 18, 2013 at 3:06 PM    

How to make it just show on my article posts ?

Erwin AW June 18, 2013 at 3:06 PM    

How to make it just show on my article posts ?

Cyber Tweaks June 18, 2013 at 11:50 PM    

Wow that's what i was looking for..

i was getting tired writing target="_blank" code manually but this script will help me. Thanks

bestbloggercafe June 19, 2013 at 8:24 AM    

what a great tips thanks for sharing this beautiful tips and tricks. this is a very informative blog.
SEO

Cyber Tweaks June 19, 2013 at 5:52 PM    

How to make this icon appear only on article ?

it's also highlighting blog comments links.

iOS 7 Beta Download June 30, 2013 at 5:46 PM    

Amazing tips. Is there any way to build a little script that makes every external link as a nofollow?

Lee July 1, 2013 at 9:40 AM    

Taking control of a visitor's browser is not good practice. It's best to let the user decide where to open the link.

iOS 7 Beta Download July 1, 2013 at 6:27 PM    

Mind blowing tips. Thanks for sharing your great experience with us.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment