Open All External Links In New Tab Javascript Blogger

Home
Blogger
Javascripts
DohTheme

Ninja Developers

Administrator
Staff member
5404
79

Do you want your Blog readers to have a smoother browsing experience? By default, when readers click on links, they usually open in the same tab or window, which might interrupt their reading flow, especially when they click on links leading to external websites. Fortunately, there's a simple solution! With a little JavaScript code, you can easily set up all external links to open in new tabs.

This article will guide you through the process of implementing this functionality on your Blogger blog.

Benefits of Opening External Links in New Tabs:

  • Improved User Experience: Readers can explore external links without leaving your blog, ultimately leading to a more enjoyable experience.
  • Reduced Bounce Rates: When users click an external link and it opens in a new tab, they can easily return to your blog by simply switching back to the original tab.
  • Better SEO: Search engines consider user experience when ranking websites. By offering a smoother browsing experience, you might see a slight positive impact on your SEO.
Cool! Let's walk through how to put this JavaScript code on your Blogger website. It's super simple, I promise!

Steps to Open All External Links in New Tab (Javascript):

  1. Backup Your Template (Important): Before making any changes to your Blogger template, it's crucial to create a backup. This ensures you can revert to the previous version if something goes wrong. Go to Template -> Backup/Restore and click on Download full template.

  2. Access Edit HTML: Navigate to Template -> Edit HTML.

  3. Locate the <head> Tag: Press Ctrl+F (or Command+F on Mac) to open the search bar and type <head>. Paste the following Javascript code just below the <head> tag:

  <script>
//<![CDATA[
    function openInNewTab(url) {
      window.open(url, '_blank');
    }
    document.addEventListener("DOMContentLoaded", function() {
      var links = document.querySelectorAll('a');
      for (var i = 0; i < links.length; i++) {
        if (links[i].href && !links[i].href.startsWith(window.location.origin)) {
          links[i].addEventListener('click', function(event) {
            openInNewTab(this.href);
            event.preventDefault();
          });
        }
      }
    });
//]]>
</script>

Explanation of the Code:

  • This code defines a function openInNewTab(url) that takes a URL as input and opens it in a new tab using window.open(url, '_blank').
  • The DOMContentLoaded event listener ensures the code runs only after the entire page has loaded.
  • It then selects all anchor tags (<a>) using document.querySelectorAll('a').
  • The code loops through each link and checks if the href attribute (link destination) exists and doesn't start with your blog's domain name (window.location.origin). This ensures internal links (within your blog) won't be affected.
  • If the link is external, an event listener is added to the link. When the user clicks the link, the openInNewTab function opens the link in a new tab and prevents the default behavior (which would be opening it in the same tab) using event.preventDefault().

Testing and Troubleshooting:

Once you've saved the changes, view your blog in a new window and test a few external links. They should open in separate tabs. If you encounter any issues, double-check the code placement and ensure there are no typos.

Conclusion:

By implementing this simple Javascript code, you can significantly improve your Blogger's user experience by ensuring external links open in new tabs. This keeps readers engaged with your content while allowing them to explore external resources conveniently.