Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Make All External Links in a Website Open In New...

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

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

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments