Jump to content

*Solved* How to change "Read More" text on blog excerpt

Go to solution Solved by tuanphan,

Recommended Posts

@tuanphan I'm also using the Avenue template for my new podcast blog (https://geoffwilsonhcd.com/everyday-experiences-podcast), and I tried to add the following code from above into my Blog Summary Page > Settings > Advanced > Page Header Code Injection to replace the "Read More" links with something custom, but it doesn't change the words.  Was this the right code to add and also the right place? 

I kept seeing you reference the footer code injection but I'm not sure if just this 1 blog has a footer code injection area bc I have 2 blogs on my site and I don't want to change these links for both of them.

<style>
a.blog-more-link {
    visibility: hidden;
}
a.blog-more-link:before {
    content: "Listen Here";
    visibility: visible;
}
.blog-more-link:after {
    visibility: visible;
}
</style>

I also tried the jQuery code you had in this thread but that didn't do anything either

Link to comment
11 hours ago, geoffwilsonhcd said:

@tuanphan I'm also using the Avenue template for my new podcast blog (https://geoffwilsonhcd.com/everyday-experiences-podcast), and I tried to add the following code from above into my Blog Summary Page > Settings > Advanced > Page Header Code Injection to replace the "Read More" links with something custom, but it doesn't change the words.  Was this the right code to add and also the right place? 

I kept seeing you reference the footer code injection but I'm not sure if just this 1 blog has a footer code injection area bc I have 2 blogs on my site and I don't want to change these links for both of them.


<style>
a.blog-more-link {
    visibility: hidden;
}
a.blog-more-link:before {
    content: "Listen Here";
    visibility: visible;
}
.blog-more-link:after {
    visibility: visible;
}
</style>

I also tried the jQuery code you had in this thread but that didn't do anything either

Use this new code

<style>
a.read-more {
    visibility: hidden;
}
a.read-more:before {
    content: "Listen Here";
    visibility: visible;
}
</style>

OR add this to Design > Custom CSS

a.read-more {
    visibility: hidden;
}
a.read-more:before {
    content: "Listen Here";
    visibility: visible;
}

 

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 weeks later...
On 2/14/2021 at 4:59 PM, Mariskachardet said:

Hi @tuanphan I’ve added this code to my site, and it works. 

However to underline extends the excerpt copy (see question @CASKATE). 

Can you help me on this

Can you share link to blog? 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
On 2/16/2021 at 7:21 PM, Mariskachardet said:

Edit to width: 50%; or 60%

.blog-more-link:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    transform: translatey(-3px);
}

 

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 2/11/2021 at 4:56 PM, dvgdvgdvg said:

In case this helps anyone, here's how you can do this in a blog summary block on 7.1:


a.summary-read-more-link {
  visibility: hidden;
}
a.summary-read-more-link:before {
  content: "New Link Text →";
  visibility: visible;
}

 

@dvgdvgdvg - your code works for me, but the the link is no longer centred. Do you know how to change that?

Link to comment
  • 1 month later...
1 hour ago, jenniferboddam said:

@dvgdvgdvg The code worked for me too but is no longer aligned with the rest, I have it text aligned to the right, is there a way to add alight right?

https://flugelhorn-seahorse-lzrb.squarespace.com/?p?p&p?p%3Fp=null&p%3Fp=null&p%3Fp=null

pw: design

- would you also know why the summary block doesn't have arrows anywhere? i cant find a way to get them to show

To make your "View More" links right-aligned and add the arrow back in, try the CSS below instead:

a.summary-read-more-link {
  visibility: hidden;
}
a.summary-read-more-link:after {
  content: "View More →";
  visibility: visible;
}

Hope that helps!

Link to comment
  • 1 year later...

Hi!  Wondering if anyone can help me figure out how to do this in 7.0 - to change "read more" text in a summary block.  They are using Montauk template.  

https://oldsculpingallery.org/past-exhibits-sample

Thanks!!

On 2/11/2021 at 7:56 AM, dvgdvgdvg said:

In case this helps anyone, here's how you can do this in a blog summary block on 7.1:

a.summary-read-more-link {
  visibility: hidden;
}
a.summary-read-more-link:before {
  content: "New Link Text →";
  visibility: visible;
}

 

 

Link to comment
On 5/9/2023 at 1:50 AM, FernDesigns said:

Hi!  Wondering if anyone can help me figure out how to do this in 7.0 - to change "read more" text in a summary block.  They are using Montauk template.  

https://oldsculpingallery.org/past-exhibits-sample

Thanks!!

 

Did you solve or still need help?

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
  • 1 month later...

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.