Skip to main content

Blogger Tweak - Open external links in new tab automatically

So, once upon a time, a really long while ago, I tried to customise and recreate a Blogger template which is not available anymore, but there's one thing I remember about it. I had a jQuery code written to make all the external links open in new tab. I also thought, it's about time I revive that idea and write a more intact code and here we go. 

So, there are two things to do. 

  1. Add Javascript code that detects external links and opens them in new tab.
  2. Add a CSS code to let users know that a particular link is going to be opened in new tab.

Adding a javascript code

Please follow the instructions below,
  1. Go to https://blogger.com dashboard
  2. Navigate to Themes > click the down arrow near "Customize" and then click on Edit HTML.


  3. Now scroll to the very end and paste the following code just before </body> tag.
    <script type='text/javascript'>
    document.body.addEventListener(&quot;mousedown&quot;,function(event){
          if(event.target.tagName === &quot;A&quot;){
          if(!event.target.href.includes(&quot;krishnainfotron&quot;) &amp;&amp; event.target.href.startsWith(&quot;http&quot;)){
          event.target.setAttribute(&quot;target&quot;,&quot;_blank&quot;);
          }
          }
          },true);
        </script>
  4. The code above should look like,


  5. Here, please replace krishnainfotron with the keyword that your blogspot and custom domain have in common. For example, my blogspot address is https://krishnainfotron.blogspot.com and my custom domain address is https://howtoblog.krishnainfotron.com. Since both of them have krishnainfotron in common, I have added that as keyword so that both blogspot and custom domain links in my blog will be detected as own link and open others in a new tab. 
  6. Once done, please click on the floppy icon at the top right which indicates Save.


Now, your blog will open all external links in new tab. Please test it out. Let's move on to the second part of the article,

Adding a CSS code

This CSS code is to show an indication that it's an external link and will open link in new tab. Please follow the instructions below,
  1. Go to https://blogger.com > Themes > Customize
  2. In the left, click on Advanced > In the appearing dropdown, choose "Add CSS"



  3. In the appearing text box, please paste the following code,
    a[href]:not([href*="krishnainfotron"]):not([href*="bp.blogspot"]):not([href*="blogger.com"]):not([href*="googleusercontent"]):not([href=""]):not([href^="/"]):not([href*="javascript"])::after {
    content: "";
    background-image: url('https://static.thenounproject.com/png/299638-200.png');
    background-size: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    margin-right: 5px;
    bottom: 0px;
    }
  4. Here, again please change your blog's keyword. The rest of the restrictions are to ignore image links, blogger original links etc., Although they will be opening in new tab, we don't indicate them for neatness.
  5. Click the floppy icon in the bottom right that represents save.


  6. Now you can see external links in my blog having a "Open in new tab" icon nearby as shown below,


Being all that done, it should be sufficient for opening external links in new tab at lowest code cost. Happy blogging everyone.

Please note that the image is taken from thenounproject.com with creative commons licence and it is best to give attribution for using it like I have given in my right side bar using a HTML/Javascript gadget,
(P.S - If at all do you face any problems like some links that are not supposed to open in new tab opens etc., please comment on this article so that I can check and rectify it)

See related posts:

Comments

Post a Comment

People also read,

Blogger HTTPS for custom domain and Cloudflare

In BHF, there was a recent issue related to cloudflare where the browser screams the site is a phishing site. So I thought of writing up how does a service like cloudflare affect your blogger blog. What is Cloudflare? Well we have that written all over Wikipedia: Cloudflare . Let's go on with why Blogger users look for Cloudflare. Anciently Blogger users used Cloudflare for one simple reason. HTTPS for custom domains. So what happens when you introduce Cloudflare into your domain? DNS Redirect. Your custom domain will be configured with the proxy info provided by Cloudflare and when the request is hit, DNS redirect happens. DNS redirect is bad for the site's health. A number of reasons, but the most important is that some browsers, when it detects a DNS redirection, it thinks that it is a phishing site. What is a DNS redirect? I am trying to explain this in easy terms. I'll try not to be too technical. When a custom domain URL is hit, usually the domain reques

Blogger custom domain confusions - Check before you buy

In the Blogger community forum, I happened to help a user who was not able to publish their blogspot address to their custom domain. After doing all the debugging, there was no option left out but to contact Google and finally we have known what the problem is. The problem was that the URL was not available for use in blogger.  Here on, before spending money on buying a domain, please ensure blogger allows it. Why isn't the custom domain available to buy but not available to use on Blogger? That'd be the first question every user would ask or think to ask. Unfortunately reason is un-disclosed by Blogger themselves.  So how do we know if a domain is available at Blogger or not? Earlier, there used to be no way we could do this as Blogger would throw a more generic error like below, Now, we get a more customised error for this particular case alone like below, So, here on, before spending money on buying a domain, please try publishing your blog in the domain name you are plannin