Blogger

How to Open Automatically all External Links in a New Windows

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

 1- Go to Blogger  >>  Template
2- Back up your Template
3- Click on "Edit HTML"  
4- Just above </head> paste the following scripts:
<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>

Note: 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 !











0 comments:

Post a Comment

Powered by Blogger.