-moz-user-select:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; user-select:none;
Subcribe to our RSS feeds Join Us on Facebook Follow us on Twitter Add to Circles

23 August 2014

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 addingtarget="_blank" inside each hyperlink. We wrote down a simple jQuery script that will check all hyperlinks inside your blog pages and will only add thetarget="_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. 

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!

No comments:

Post a Comment

Please feel free to comment regards this post







Blogger Widgets