How to Make All External Links in a Website Open In New Browser Window/Tab

0

Earlier this week, I got a request from a blogger friend of mine to help him resolve an issue with the way his pages were opening when he added a widget to his blog. Having looked into the issue, I noticed it was better to compile a tutorial on it. Ordinarily, one can decide on how he/she wants hyperlinks in his/her blog page to be opened by adding either target=”_blank” or target=”_self” attribute to the hyperlinks when composing a post but this will be stressful and time consuming.

For today’s tutorial, I will be showing you guys how to add a script to your blog which will automatically make all external links in your blog page open in a new window instead of opening in the same browser tab as will the internal links which will not be affected by the script. The major advantage of this script is that it will help reduce your blog’s bounce rate and thus increasing its page-views.

To add it to your blog and make external links in the blog open in a new browser window/tab, simply go through the step by step guide below;

For Blogger:

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for <head> with the help of Ctrl + F.
  • Now copy the script below and paste just after/below the <head> tag. Ignore this step if your template already have the script.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  • Next search for </head> tag.
  • Copy the script below and paste immediately above/before the </head> tag.
<script type='text/javascript'>

$(document).ready(function() {

  $("a[href^='http://']").each(

    function(){

     if(this.href.indexOf(location.hostname) == -1) {

        $(this).attr('target', '_blank');

      }

    }

  );

$("a[href^='https://']").each(

function(){

if(this.href.indexOf(location.hostname) == -1) {

$(this).attr('target', '_blank');

}

}

);


});

</script>
  • Finally click on Save Template to apply the changes to your blog.

For WordPress and HTML Pages:

  • Open the websites template code and search for <head>
  • Now copy the script below and paste just after/below the <head> tag. Ignore this step if your template already have the script.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  • Next search for </head> using Ctrl + F to search for it.
  • Copy the below code and paste just before/above the </head> tag as found.
<script type='text/javascript'> $(document).ready(function() { $("a[href^='http://']").each( function(){ if(this.href.indexOf(location.hostname) == -1) { $(this).attr('target', '_blank'); } } ); $("a[href^='https://']").each( function(){ if(this.href.indexOf(location.hostname) == -1) { $(this).attr('target', '_blank'); } } ); }); </script>
  • Finally save the template and you are done.

Optional Customization:

If you want all the internal links in your blog page to start opening in a new browser window/tab, then you will have to equate the href value to a positive one (==1) instead of the negative value (==-1) as found in the script above.

Have any question? Feel free to ask.

LEAVE A REPLY

Please enter your comment!
Please enter your name here