Edit the Read More Blog Link

What does this code do?

This code snippet will allow you to change the words “Read More”, get rid of the underline, add an arrow, and/or add a hover animation to the Read More Blog Link.

Note: If you are using Squarespace 7.0, you may need to change the selector to match your template.

Code Snippets

Copy and paste the code for the effects you would like.

Squarespace 7.0

Change the Words “Read More”

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Read More Blog Link -->
<script>
(function () {
  var readMore = document.querySelectorAll(".BlogList-item-readmore span");
  for (let i = 0; i < readMore.length; i++) {
    readMore[i].innerHTML = "YOUR TEXT HERE";
  }
})();
</script>

Then change the words YOUR TEXT HERE to whatever text you would like.

Add/Change the Arrow

.BlogList-item-readmore span:after {
  content: "\2192" !important;
}

You can then change the numbers 2192 to any Hex Unicode Arrow Number. You can find a list of arrows here.

Add a Hover Animation

/* Add a Growing Animation on Hover */
.BlogList-item-readmore {
  -webkit-transition: transform ease 0.8s !important;
  transition: transform ease 0.8s !important;
 }
.BlogList-item-readmore:hover {
  transform: scale(1.1) !important;
}

/* Add a Color Change on Hover */
.BlogList-item-readmore {
  -webkit-transition: color ease 0.8s !important;
  transition: color ease 0.8s !important;
 }
.BlogList-item-readmore:hover {
  color: red; /*color on hover */
}

Squarespace 7.1

Change the Words “Read More”

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Read More Blog Link -->
<script>
(function () {
  var readMore = document.querySelectorAll("a.blog-more-link");
  for (let i = 0; i < readMore.length; i++) {
    readMore[i].innerHTML = "YOUR TEXT HERE";
  }
})();
</script>

Then change the words YOUR TEXT HERE to whatever text you would like.

Add an Arrow

Copy and paste this code into Design > Custom CSS

/* Read More Blog Link */
.blog-more-link::before {
  content: "\2192"; /* arrow */
  float: right;
  padding-left: 5px; /* space between arrow and words*/
}

You can then change the numbers 2192 to any Hex Unicode Arrow Number. You can find a list of arrows here.

Get Rid of the Underline

Copy and paste this code into Design > Custom CSS

/* Remove Read More Underline */
 .blog-more-link::after {
  display:none;
}

Add a Hover Animation

Copy and paste the effect you would like into Design > Custom CSS

/* Add a Growing Animation on Hover */
.blog-more-link {
  -webkit-transition: transform ease 0.8s !important;
  transition: transform ease 0.8s !important;
}

.blog-more-link:hover {
  transform: scale(1.1) !important;
}

/* Add a Color Change on Hover (no underline) */
.blog-more-link {
  -webkit-transition: color ease 0.8s !important;
  transition: color ease 0.8s !important;
}

.blog-more-link:hover {
  color: red !important; /*color on hover */
}

/* Add a Color Change on Hover (with underline) */
.blog-more-link {
  -webkit-transition: color ease 0.8s !important;
  transition: color ease 0.8s !important;
}

.blog-more-link:hover {
  color: red !important; /*color on hover */
}

.blog-more-link:hover:after {
  background: red !important; /*underline on hover */
}

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the text, arrow, spacing, and animation to get your desired effect.