In today's digital landscape, optimizing user experience is paramount. One aspect of user-friendliness is ensuring that external links open in a new window or tab when clicked, sparing users the hassle of manually doing so.
In this post, I'll share a straightforward Script that streamlines this process.
This script will also selectively add the target="_blank" attribute to external links in your Blogger or WordPress blog, ensuring a smoother browsing experience for your readers.
Automatic Handling of External Links:
One of the readers pitched this to me to automatically open all external links in a new window or tab without altering each hyperlink manually.
To address this, I discovered a jQuery script that scans all hyperlinks within your blog's pages, selectively applying the target="_blank" attribute to external links while leaving internal links untouched.
The script distinguishes external hostnames and modifies the HTML accordingly, all with the aim of enhancing your blog's usability.
How to Implement this Feature:
Let's explore how you can effortlessly integrate this dynamic solution into your blog. Note that this method is compatible on any site. Whether you use Blogger, WordPress or other host platforms.
1. Go to your Blogger dashboard and navigate to the "Template" section.
2. Before making any changes, it's crucial to back up your template. This ensures you can easily restore it in case anything goes awry.
3. Next, click on "Edit HTML" to access your template code.
4. Just before the closing </head> tag, 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>Note: If you already have the jQuery library source code installed on your blog, omit the first script tag.
5. Save your template, and you're good to go!
How the Script Works:
For those interested in the inner workings of the script, here's a brief overview:
- The script is implemented twice, once for links starting with "http://" and then for "https://." This covers both secure and non-secure links.
- The script scans the values inside href attributes of hyperlinks. When it detects a value that does not match the location hostname (i.e., the external domain), it inserts a target="_blank" attribute into the hyperlink tag.
In essence, this script ensures that external links open in a new window or tab while keeping internal links unaffected.
Update:
The previous code above was coded in jQuery and based on the feedback on minimizing dependencies, this script has been updated to using a pure Javascript approach to accomplish the same task:
identifying external links and setting their target attribute to "_blank."
Whether you are working on a static site or a dynamic web application, this JavaScript solution ensures a seamless user experience.
This is a lightweight and efficient solution. You do not need to depend on JQuery. Just replace the above code with the one below
document.addEventListener("DOMContentLoaded",function(){var t=document.querySelectorAll('a[href^="http://"]'),e=document.querySelectorAll('a[href^="https://"]');t.forEach(function(t){-1===t.href.indexOf(location.hostname)&&t.setAttribute("target","_blank")}),e.forEach(function(t){-1===t.href.indexOf(location.hostname)&&t.setAttribute("target","_blank")})});See an Advance Setup
Explanation of How this Javascript Works:
- The code waits for the DOMContentLoaded event to ensure that the document is fully loaded before manipulating it.
- `querySelectorAll` is used to select all anchor (`<a>`) elements whose `href` attribute starts with "http://" or "https://".
- The `forEach` method is used to iterate over the selected links.
- For each link, it checks if the `href` does not contain the current `location.hostname` (i.e., the current website's domain). If it doesn't, it means the link is external.
- If the link is external, the `setAttribute` method is used to set the `target` attribute to "_blank", which opens the link in a new tab or window.
This JavaScript code functions the same as the jQuery code, ensuring that all external links open in a new tab.
Conclusion:
By automating the process of opening external links in new windows or tabs, you can significantly improve your blog's user experience. This SEO-friendly and browser-compatible script is a simple yet effective way to make your blog more user-friendly, ensuring that readers can explore external content without leaving your site.
Experience the benefits of this feature by clicking on external links within your blog. Your readers will appreciate the seamless browsing experience you provide.
Enjoy a more Customization journey on Blogger!
