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
  • Replies 8
  • Views 8.2k
  • Created
  • Last Reply

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

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.