Automatically Open all External Links in a New Window in Blogger!

automatically open links in new windowJust today a client requested us that he wish to open all his external links in new window or new tab when clicked and he is not willing to manually do it for each post by adding target="_blank" inside each hyperlink. We wrote down a simple jQuery script that will check all hyperlinks inside your blog pages and will only add the target="_blank"  attribute to links which are external links. It wont  put any effect to internal links of the blog. The script will only detect external hostnames and the moment it finds one, it will insert into the html a target attribute that tells the browser to open the link in a new window. Thus preventing your blog readers from leaving your blog and also helps in increasing your overall pageviews and bounce rate. We thought we shall also share the script with all of you. 

UPDATE: A more updated version of this script has been released. Find how to stop internal links from opening in new window and only open external links in new window.

Open all external links in a new tab

Follow these easy steps to add this cool dynamic way of updating all external links.

Note: This method works for both blogger and wordpress blogs, irrespective of platforms.

  1. Go to Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Just above </head> paste the following script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<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>

PS: Please do not add the red code if you already have jQuery library source code installed on your blog.

     5. Save your template and you are all done!

Check your blog and click some external links to see it working just fine. :)

How it works? (Optional know-how)

I have added the code twice to check once for links starting with http://  and then for https://. Normally all bloggers blogs have hostnames starting with http://  without the http:// secure protocol. Therefore I added the second instance so that the script may work even for wordpress self hosted blogs.

The yellow highlighted part is where the script scans values inside href attributes and if the value is equal to a negative one (== -1), then this indicates that the hostname is an external domain.

Note: If you equate the href value to a positive one (==1) inside the conditional statement, then all your internal links will start opening in new windows!

Once the condition is met, the script then inserts a target="_blank" attribute inside the hyperlink tag. That simple!

Hope this script proves helpful for most of you. It is extremely SEO friendly and works fine with all major browsers be it IE, webkit browsers or Mozilla.

Peace and blessings buddies! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

33 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Splendid post...bundles of thanks...To MBT Editorial......

    Mustafa bhai as you told...if we replace the negative -1 with positive 1 then all the external links will start opening in new widows....But what if we want to check all the internal links....

    Does this script will work on internal links in both cases....mentioned above..

    1: mean if someone click any internal link and that goes open in new windows...

    2: by replacing -1 with 1 to start opening all internal links in new tabs..

    SO the same script could be work for internal links too..If so...How we did it... because most of bloggers also do care even to open the internal links in new window..or tab.

    ReplyDelete
    Replies
    1. Hafeez!
      So glad to see your insightful questions again :) thank you for being here

      I meant that if you replace the negative one with postion one then instead of your external links, all internal links will open in a new window.

      example:

      1. ==-1 will open all external links in a new window

      2. ==1 will open all internal links in a new window


      You are right on your last sentence :)

      Delete
  2. i just add this code above </head> <base target="_blank"/> and all of link (external/internal) open in new tab

    ReplyDelete
  3. Once again this is the awesome thing by MBT, Thanks bro..

    ReplyDelete
  4. nice sharing Mohammad Mustafa Bro
    www.Pakbloggertricks.com

    ReplyDelete
  5. Wow it works on Weebly too!! But you need to include the red marked script. I just tried on my blog http://pinoyshowbizz.weebly.com/ and this could make things faster specially if you have too many links to manually check.

    ReplyDelete
    Replies
    1. You are right Domz. It would work on almost any platform where you can edit the template . So glad it worked for you :)

      Delete
  6. Thanks Admin for this tutor.. plz what is the benefit of having the red cod in our blog... plz i observed something and i just need some explanations let me know if the red code is responsible. thanks

    ReplyDelete
    Replies
    1. The red code is a jQuery library. The fancy JavaScript effects on your blog can only work if you have this code installed on your template. You need to include it only once. Since I always include this red code therefore to avoid repetition I inform readers to add it only if they have not previously added it :)

      Delete
    2. Thank you Mohammad, but does it have any effect on Search Engine Optimization? cos i just noticed my blog rank on SEO has increased, i dnt know if the code is responsible or Google has done it again... You remember what Google did last that some sites went down while some went up... i benefited from that cos my site went really up.. you can check it up at www.yabatechportal.com Thank u sir

      Delete
  7. Is it possible to make an exception to a single external link so that all external links except one will open in a new page?

    ReplyDelete
  8. Thanks for sharing, i use it in my blog : http://marquedevoiture.blogspot.com/

    ReplyDelete
    Replies
    1. Hiii , i want to use your menu dropdown list
      can you please share the codes

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Thanks, it worked!
    you just saved me a whole lot of stress

    ReplyDelete
  11. Bhai, I have a peculiar problem, I have a blog wherein I want to open links in my home page into a new tab as my blog links all posts to external sites. I have solved the problem as mentioned below.

    Here is the HTML code for a particular post. I have changed < to this ( for readability here.

    (script type="text/javascript")
    window.location = "http://www.homecooksrecipe.com/2008/04/rasamalaai.html";
    (/script)

    And in the template just above (/head) I have inserted the following code.

    (base target='_blank'/)

    It works very well but the problem is it opens all links in the blog in a new tab since the above code is generic. As an example I cannot add a "Back to Top" widget for the simple reason that even this functionality opens in a new tab.

    My Blog URL :http://indiafoodnet.blogspot.in/

    May you kindly help me with this if it is not a big task for you.

    Thanking you,

    ReplyDelete
  12. Thank you for this post...clear, concise, exactly what I needed.

    ReplyDelete
  13. Thanks a lot for posting this! I am using an RSS feed into an html page, so I have placed it in the head of the html page, and it is working tickety boo!

    ReplyDelete
  14. Thanks a lot sir. It is working now. All of my blog's external links are opening in new window. Take a look: http://gouravkulkarni.blogspot.in/
    Again thanks.

    ReplyDelete
  15. Nice info, but why my navbar page open at new tab too?

    ReplyDelete
  16. Thank you! This is exactly what I needed! Worked quickly and perfectly! :)

    ReplyDelete
  17. hello, I have added a page to my blog that is an external link, i want to make this external link open in another page. Will your script do that?
    thanks so much in advance for any advice.

    ReplyDelete
  18. Been Using this script for a while. i have a music download blog and i 'bitly' to shorten download links so i can track them, is there any way to make 'bitly' domain also not to open in new tab?

    ReplyDelete
  19. EXCELLENT!!! WELL DONE!!! VERY USEFULL!!!

    ReplyDelete
  20. i have problem with this my main menu link opening in new tab how to fix it.

    ReplyDelete