How to customize your blog post pagination links in Squarespace 7.1

blog

Oct 22

Ready to give your Squarespace blog some serious style points? In this tutorial, we're diving into the world of custom pagination! I'll show you how to transform those boring "Previous" and "Next" links into eye-catching design elements. We'll start with changing fonts (no code needed, I promise!), then move on to adding some snazzy "Previous/Next Article" text. Then we'll play with colors for the background, text, and icons, and even swap out those default arrows for your own custom images. To finish things up, we'll stack these lovely new links on mobile.

Here are the codes from this tutorial. Make sure you customize the colors & other values in this code so it matches the unique style of your own website.

/* blog pagination code from insidethesquare.co */
/* Add text above the links */
.item-pagination[data-collection-type^="blog"] .item-pagination-title:before{
content: "Previous Article \A";
white-space:pre;
font-size:15px;
text-transform:uppercase;
letter-spacing:5px;
color:red
}
.item-pagination[data-collection-type^="blog"]  .item-pagination-link--next .item-pagination-title:before{
content:"Next article \A"
}

/* add a background to the pagination code from insidethesquare.co */
.item-pagination[data-collection-type^="blog"] {
background:#e5f5f6 }

/* blog pagination code from insidethesquare.co */
/* replace the arrow icon: left */
.item-pagination[data-collection-type^="blog"] .item-pagination-link .item-pagination-icon svg{
stroke:transparent!important;
background-image:url(image-url-here);
background-size:cover;
width:180%
}
/* replace the arrow icon: right */
.item-pagination[data-collection-type^="blog"] .item-pagination-link--next .item-pagination-icon svg{
background-image:url(image-url-here);
}

/* stack links on mobile code from insidethesquare.co */
@media only screen and(max-width: 640px){
.item-pagination--prev-next {
flex-direction: column!important;
}
.item-pagination-link{
max-width:100%;
margin-bottom: 40px
}
.item-pagination-link--next{
margin-bottom:0px!important
}
}