How to have the “read more” link on your Squarespace

Have you been wondering how to get the read more link to your Squarespace site? In today’s blog post I have linked a youtube video that I have created showing you and explaining to you how I got my read more link for all of my blog posts!

Also, I have included the code so all you have to do is copy and paste as well as some tips that thought would help you out to make the code work to its max.

Wondering how to get that “read more” link on your Squarespace site?

A quick overview of the steps that you need:

1) You have to log into your Squarespace site.

There are three ways that you can log in to your site; The first way hitting the “ESC” key on your keyboard when you are on your website. Second is to type in “/config/“. The Three and final way to log in is to simply just go to squarespace.com and click the login tab, on the top right corner.

2) Select Design then Custom CSS

when you login into your Squarespace site you will see a menu on your left-hand side. Click on the Design tab; then go to the bottom of the second menu where you will see “Custom CSS”. Click it.

3) input the CSS

You will see a blank CSS text box if you did not add any other type of CSS code for something. There you will input this code in there.

/*** READ MORE LINK - TEXT FORMATTING ***/

.entry-more-link a:not(.sqs-block-button-element) {
  color: #5BBFC2 !important;
  background-color: #fff;
}

.entry-more-link a:not(.sqs-block-button-element):hover {
  color: #5BBFC2 !important;
  background-color: #fff;
}

/*** READ MORE LINK - FULL WIDTH FORMATTING ***/

.entry-more-link {
width: 100%;
height: auto;
padding: 0px;
background-color: #fff;
border: 0px solid #222;
font-family: "Source Sans Pro", "Source Sans Pro", sans-serif;
font-size: 14px;
line-height: 2.75em;
font-weight: light;
font-style: light;
text-transform: uppercase !important;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
margin-top: 25px;
}

.entry-more-link:hover {
color: #fff !important;
border: 1px solid #5BBFC2;
}

4) Tweak it & Preview it

Chance are that your website is not just like mine and that you have your own color and style that reflect your brand.

The beauty about Squarespace is that you can alway make it your own by simply by putting some custom CSS and other small changes that will help.

If you are not sure what one of the lines of the code does, you can change the #number or text to see what it does. Also when you play with the code, you will see it right away what it does.

Here are a couple of tweaks that you can do.

  • Font
    • Replace “Source Sans Pro” with any font that you use on your site. Just make sure that you type it out just the way it’s named.
  • Font Size & Line height
    • You can change the size of the font to any size. Just make sure that you put “px” after the number
    • You can also change the line height. Just make sure that you put “em” after the high number; example: 2.75em
  • Colour
    • colors in the CSS are referred to hex codes.
    • There are two great websites that you can find the hex code to the color you’re looking for. The first one is in the good hex code directory here. The second one is the Adobe Colour (formerly known as Adobe Kuler)
  • Border size
    • If you do not want any borders; All you have to put in is 0px
    • If you do want a border, All you have to do is type in 1px or more (depending how thick you want it)

BONUS TIP:

If you want the code to work; you have to fill out the “except” in the options tab when you are writing your blog post. This will let code know where to put the code for it to work.

Reply...