The target attribute inside <a> tag was never meant for internal links at all and therefore it makes no sense to irritate your website visitors by opening blog links inside new tabs thus forcing them to close the previous page in order to read the current page in new tab. The tutorial below includes instructions for both blogspot blogs and wordpress blogs. This script will immensely improve your daily pageviews and will tremendously decrease the overall blog bounce rate thus leading to a better search engine ranking and of course blog revenue. We have implemented it on mbt and also on our wordpress blog and it is working just great Alhamdulillah.
Open all links In New Tab Except Internal Links
Blogger templates and Wordpress themes have different DOM structures and therefore due to the difference in class and ID name, I will be discussing the installation steps separately for both platforms.
FOR BLOGGER
1 Go To Blogger > Template
2 Backup your template
3 Click Edit HTML
4 Paste the following script just above </head> tag.
<script async='true' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
//Open External Links in New Window - Plugin by STCnetwork.org
$(document).ready(function(){
$("#Blog1 a[href^=http], #Blog1 a[href^=https]")
.each(function(){
if (this.href.indexOf(location.hostname) == -1){
$(this).attr({ "target":"_blank" })}
if (this.href.indexOf(location.hostname) != -1){
if ( $(this).attr('target') == '_blank') {$(this).attr("target", "");}}
});});//]]>
</script>
Note: Remove the yellow highlighted code if you already have added jQuery library inside your template
5 Save your template and all done!
FOR WORDPRESS
Follow these steps for a wordpress blog to open external links in a new window but open internal links inside the same window.
1 Go to your theme settings page or go to Appearance > Editor > header.php
2 Paste the following code just above </head> tag.
<script async='true' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
//Open External Links in New Window - Plugin by STCnetwork.org
$(document).ready(function(){
$("#content a[href^=http], #content a[href^=https]")
.each(function(){
if (this.href.indexOf(location.hostname) == -1){
$(this).attr({ "target":"_blank" })}
if (this.href.indexOf(location.hostname) != -1){
if ( $(this).attr('target') == '_blank') {$(this).attr("target", "");}}
});});//]]>
</script>
Note: Remove the yellow highlighted code if you already have added jQuery library inside your template
3 Save Settings and you are all done!
How are Internal and external links Identified?
The script looks for all links inside the post body and comment body. It then removes target attribute from all internal links and adds it in external links only. The location.hostname variable checks if the link is an internal link or external. For external links the condition is set to ==-1 and for internal links the condition is set to !=-1
If you are using my old script, I will recommend that you replace it with this new script which is much more lightweight and SEO friendly..
I hope these new script may put a positive effect on your overall page impressions and help you engage readers more on your site instead of irritating them with popping links in new tabs. Let me know if you need any help. =)
