How to add custom labels to your blog pagination
Looking for the horizontal scrolling image tutorial?
There was an erorr in this week's email link 🤦
Click here to see the latest tutorial → insidethesquare.co/squarespace-tutorials/horizontal-scrolling-images
If you are using Squarespace for your blog, you might have noticed that the Previous and Next links that appear in your blog posts are pretty generic. While they serve their purpose of guiding readers through your archives, they do not add any personality or brand identity to your navigation.
But what if you could change that? What if you could add custom labels to the Previous and Next links, making them unique and memorable? Well, good news! You can, and this tutorial video will teach you how. 😎
A little pro tip - this works for projects inside protfolios too! If you’re not sure what type of collection page to use, check out this overview of blogs vs portfolios.
Here are the codes we used in the video.
Be sure to change the example text to your own, and add any font style changes that you want to see so it matches the rest of your site.
/* Text before the previous blog title */
.item-pagination-link--prev .item-pagination-title:before {
content:" PREVIOUS \A"!important;
white-space:pre;
font-size: 1rem
}
/* Text before the next blog title */
.item-pagination-link--next .item-pagination-title:before {
content:"NEXT \A"!important;
white-space:pre;
font-size: 1rem
}
How to install this code:
If you want this to happen on every event on your website, paste your code in your main file.
Navigate to Design and then select Custom CSS here.
If you already have code there, that’s okay; Just add this to a new line under your existing code!
If you want to add it to a specific blog, click on the gear next to the blog title, and select the Advanced menu option. Here you can click on Post Blog Code Injection.
Here you can paste between two style brackets, like this:
<style>
/* Text before the previous blog title */
.item-pagination-link--prev .item-pagination-title:before {
content:" PREVIOUS \A"!important;
white-space:pre;
font-size: 1rem
}
/* Text before the next blog title */
.item-pagination-link--next .item-pagination-title:before {
content:"NEXT \A"!important;
white-space:pre;
font-size: 1rem
}
</style>
You can add this code to an individual Portfolio to add text to Project pagination too! On the portfolio, select the gear icon to open the Portfolio settings. Click on the Advanced option and paste the code between style brackets like this:
<style>
/* Text before the previous blog title */
.item-pagination-link--prev .item-pagination-title:before {
content:" PREVIOUS \A"!important;
white-space:pre;
font-size: 1rem
}
/* Text before the next blog title */
.item-pagination-link--next .item-pagination-title:before {
content:"NEXT \A"!important;
white-space:pre;
font-size: 1rem
}
</style>
Congratulations - you’ve used CSS to add custom content to your Squarespace site! 🎉
I have a few other tutorials on how to customize your blog posts and projects available on my website. Here are links to some related tutorial videos you can try:
