How to add a Back button to blog post - Squarespace 7.1

Step 1

Open up the cog / settings of the blog post

Step 2

Click ‘Advanced’ then ‘Post Blog Item Code Injection’

Step 3

Copy and paste the below code in.

To update the text, change the URL “/news” to a link of your choice

Change the “Back to All Blogs” text to something more customised.

Step 4

Test and check your work

<!-- Back button for singular blog post -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Target URL for the Back link
    const backUrl = "/news"; // Change this to whatever page you want

    // Add Back link before .blog-item-title
    const blogTitles = document.querySelectorAll(".blog-item-title");
    blogTitles.forEach(function(title) {
      const backLink = document.createElement("a");
      backLink.href = backUrl;
      backLink.className = "eventitem-backlink";
      backLink.textContent = "Back to All Blogs"; // Update this text to something customised
      title.parentNode.insertBefore(backLink, title);
    });
  });
</script>

<style>
  a.eventitem-backlink {
    display: block;
    text-align: left;
    margin-bottom: 0.5em;
    text-decoration: none;
    color: inherit;
  }
  a.eventitem-backlink:hover {
    text-decoration: underline;
  }
</style>