If you are a Blogger, you must know the difference between Internal links and External links. Here, in this tutorial We will tell you the difference between both links and then show you a method by which you can open all your external links in a new Tab.
Internal vs. External Links
Internal Links are those which take users to another page of the same website. They should never open in new tabs or new browser tabs as it would confuse your users. Your Users must be able to navigate easily through your menus. By doing this they could easily understand your website.
External Websites, however should open in new Tabs as otherwise it would take your users away from you. It also makes your users wandering here and there as they have to use the Back button everytime they click on any external link. It in general slows down user flow on your website. Along with this, it also gives you an inaccurate analytics. As, everytime your user see an external link they will try to go to that link but as the link will be opened in the same tab it gives the impression that user has left your page in middle which is not the real case.
How to Set External Links to Open In New Tab
There are so many ways you can fix this problem on your site.
Method 1: One of them is that you can select to open in new window while posting any post like the way shown in below screenshot.
Here, you can tick against the box "Open this link in a new window". Only problem in this method is that you can't do manually everytime or if you have already so many post, this method would be cumbersome. This is why, I will tell you an another way to do all this.
Method 2: In this method, all you have to that is to put a snippet of code and you are done. Follow the below written steps to add target attribute to your all external links.
Click Here to watch this method in YouTube.
Step 1: Go to blogger dashboard and open the blog in which you want this modification.
Step 2: Go to Template and then select Edit HTML.
Step 3: Click anywhere on HTML code and then press (CTRL+F). It will open the searching menu.
Step 4: Type </head>.
Step 5: Copy the Following Code.
<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>
<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>
Step 6: Paste the above code just above the </head> and press Save Template.
That's it you are done. Now, go to your website and see if it works. It will 100% work. If you face any problem, ask us in the comment box.
Comments
Post a Comment