Jump to content

Opening an external link in a new window in markdown

Recommended Posts

Site URL: https://www.roadsafetytrust.org.uk

Hi.

I am not a coder at all and have never used markdown until today (but have produced quite a lot of Squarespace sites). What I would like to know is if anyone has found a way to make external links open in a new window when using markdown? I wanted to produce a list of FAQs that you click on the title to expand. I thought I had found the solution, until I tested the page. See: www.roadsafetytrust.org.uk/faqs-md

If anyone has a solution, I would be really, really grateful. Even if it means buying a plug-in.

Thank you!

Lynne

Link to comment

Hi @spotonlynne

We made a cool FREE extension for FAQ. It works like SQSP other elements. You don't need code knowledge! And you don't need HTML Code block or Markdown or ....

Just see this video and install from here.

 

 

4.thumb.jpg.c77fd53f4ee20acf1681bbdfe21c5aff.jpg

 

If you need more customization feel free to contact me via DM or Skype: LeopoldJobs.

Best,
Leopold

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
30 minutes ago, spotonlynne said:

What I would like to know is if anyone has found a way to make external links open in a new window when using markdown?

Hi Lynne

You can add HTML to Markdown Blocks, so instead of using the link button, you can simply add the HTML. For example:

<a href="www.squarespace.com" target="_blank">Squarespace</a>

Change the url and description to match your needs. 

Note that this will open a new “browsing context”. This usually means "new tab" instead of "new window", but it will depend on the visitor’s browser settings. You have no influence over that.

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

You can also use the Accordion Plugin from sqspthemes.  (affiliate link)

With this plugin you can use the Text Block for Accordion Content, so you will insert the link with the customization that opens in a new window.

or use this free tool to add FAQ Accordion Dropdown.

faq-dropdown1-min.thumb.png.169b54f9eee25b2ac70fb0ac2179df21.png

faq-dropdown2-min.thumb.png.a6f09cfc5360fb3bd95c5448f03be733.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 9/12/2020 at 7:42 AM, paul2009 said:

Hi Lynne

You can add HTML to Markdown Blocks, so instead of using the link button, you can simply add the HTML. For example:




<a href="www.squarespace.com" target="_blank">Squarespace</a>

Change the url and description to match your needs. 

Note that this will open a new “browsing context”. This usually means "new tab" instead of "new window", but it will depend on the visitor’s browser settings. You have no influence over that.

-Paul

 

Site URL: https://www.chrispcreations.com/about

I'm running into a similar issue. I am able to use the link button within the Markdown block to add an external link but can't get it to open in a new tab/window. I tried plugging your HTML snippet in but must not be doing it correctly because it's not working—any advice?

Screen Shot 2020-12-21 at 1.03.28 AM.png

Edited by chrisp14
Link to comment
On 12/21/2020 at 2:07 PM, chrisp14 said:

I'm running into a similar issue. I am able to use the link button within the Markdown block to add an external link but can't get it to open in a new tab/window. I tried plugging your HTML snippet in but must not be doing it correctly because it's not working—any advice?

Screen Shot 2020-12-21 at 1.03.28 AM.png

Can you share link to page where you use Markdown? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@chrisp14

You're so close to having 100% HTML I suggest you use a code block set to HTML and add the following.

<style>

  .expertise-list {
  
    font-size: 2em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    list-style-type: none; /* remove bullets */
    margin: 0; /* remove margins */
    padding: 0; /* remove padding */
    
    }
    
  .expertise-list a {
  
    font-size: 0.5em;
    
    }
    
  </style>

<p>

  Areas of Expertise
  
  </p>

<ul class="expertise-list">

  <li>
  
    Art Direction
    
    </li>
    
  <li>
  
    Motion Design
    
    <a href="http://chrispcreations.com/motion-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  <li>
  
    Visual Effects
    
    <a href="http://chrispcreations.com/vfx-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  </ul>

Test this first before you delete your current code block. Basically we use an unordered list and create our own class to reduce some of the redundant styling.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
18 hours ago, creedon said:

@chrisp14

You're so close to having 100% HTML I suggest you use a code block set to HTML and add the following.



<style>

  .expertise-list {
  
    font-size: 2em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    list-style-type: none; /* remove bullets */
    margin: 0; /* remove margins */
    padding: 0; /* remove padding */
    
    }
    
  .expertise-list a {
  
    font-size: 0.5em;
    
    }
    
  </style>

<p>

  Areas of Expertise
  
  </p>

<ul class="expertise-list">

  <li>
  
    Art Direction
    
    </li>
    
  <li>
  
    Motion Design
    
    <a href="http://chrispcreations.com/motion-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  <li>
  
    Visual Effects
    
    <a href="http://chrispcreations.com/vfx-reel" target="_blank">
    
      → REEL</a>
      
    </li>
    
  </ul>

Test this first before you delete your current code block. Basically we use an unordered list and create our own class to reduce some of the redundant styling.

Let us know how it goes.

Thank you creedon! I plugged that in to a code block and it works like a charm. Made a few more adjustments to get the spacing and color correct. Thanks again for your help.

 

Edited by chrisp14
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.