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.
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.
- Go to Blogger > Template
- Backup your template
- Click "Edit HTML"
- Just above </head> paste the following script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>PS: Please do not add the red code if you already have jQuery library source code installed on your blog.
<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>
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.