Create Sticky Pagination Links with Vertical Text on the Sides of Your Squarespace Blog

In this blog post, we'll show you how to create sticky pagination links with vertical text on the right and left sides of your blog. This design is perfect for those who want to add a unique and modern touch to their website's navigation.

Here’s how the code was generated, using chatGPT.

/* Variables */
:root {
    --pagination-width: 50px;
    --link-color: #245959;
    --hover-background-color: rgba(0, 0, 0, 0.1);
}

/* Pagination links */
.collection-type-blog .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    float: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    position: fixed;
}

/* Next and older posts links */
.collection-type-blog .pagination a.next-item, .collection-type-blog .pagination a.older-posts {
    right: 0 !important;
    left: auto !important;
    text-align: center;
    width: var(--pagination-width);
}

/* First child link */
.collection-type-blog .pagination a:first-child {
    left: 0;
    text-align: center;
    width: var(--pagination-width);
}

/* Link colors */
body a, body a:link, body a:visited {
    color: var(--link-color);
}

/* Link hover effect */
.collection-type-blog .pagination a:hover {
    background-color: var(--hover-background-color);
    cursor: pointer;
}

With this CSS code, you can create sticky pagination links with vertical text on the right and left sides of your blog. This unique design adds a modern touch to your website's navigation and enhances the user experience. Simply add the provided CSS code to your website's stylesheet, and you're good to go!