How to get links to open a new tab ONLY on one page

Site URL: https://thebetterbecauseproject.squarespace.com/stories/

How can I get all links on a single page to open up a new tab? I've tried using this in the "Page Header Code Injection"

<base target="_blank"/>

But, it makes every link throughout the website to open up. Is there something else I can try with html, so that it would only open up a new tab for the links in a particular page?

When you are testing the base tag are you in edit mode? If so then the edit mode overrides the base tag behaviour in my testing.

Keep your base tag in the Page Header Code Injection for the page you want the links to open to a new page.

Then the trick is to get out of edit mode to test the behavior is correct.

Hit the arrow or the escape key (if you have that enabled).

Once out of edit mode you should see the following URL.

To that URL add ?noredirect and hit return to go to that URL.

This should help you not fallback into edit mode by accident.

Now click on a link on that page. Does it open a new window or tab?

To get back into edit mode hit escape key (if enabled). Or add "config/" (without the quotes) to the base URL of your website.

Let us know how it goes.

It's not an issue of whether or not the code is allowing for the tabs to open up in a new tab. It's that with the code, every single link throughout the whole domain opens up into a new tab when we've tested it outside of edit mode. We'd like to know how we can get it only for the particular story page, rather than throughout the whole website. Any idea might be up with it?

I am unable to reproduce the behaviour you describe. I put that base tag in Page Settings > Advanced > Page Header Code Injection for a test page on my test site. Only that page opens links into a new window/tab. Links on other pages are unaffected.

Hmm. After a bit of experimenting, it seems that the code makes all of the links in the site header open up in a new tab. I would like to be able for it to only happen for the "Read more" links I have under the blog stories. With that code, and a site header, you should see the behavior replicate itself in the site header.

Bumping this thread, still have not resolved this.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page.

<script>

  $( ( ) => {
  
    $( '.blog-more-link' ).attr ( 'target', '_blank' );
    
    } );
    
  </script>

Let us know how it goes.

I've put both scripts in their respective locations and it doesn't seem to do anything. Clicking on the links will only bring me to the page, but not create a new tab.

My bad. I updated the second script in my previous post. Hopefully that will do the trick!

Okay I've tried it. It's still doing the same thing, which is weird.

When I click on read more links on that page a new tab is opened in my browser. I can see that the code you added is working.

The following pics show the code is there and working.

My thinking is that your browser is blocking the target _blank behaviour. Perhaps a security setting to prevent pop ups. It could also be ad blocker software.

Oh, I see. Yes, it looks like my Firefox's adblock did block the new tab. It works just fine on safari on my phone. Thank you for your help! 🙂