Replace Blog Post Pagination Links with "Show All"

Hello,

I am using the blog feature to function as a directory list of schools on my website. Each blog post is an individual page for a school. I would like to replace the current next/last pagination links on the blog pages with a link back to the main blog. Is that possible? If so, would like the text to be left aligned on the page and say 'Show All Schools'. Thank you!

Blog URL: https://stingray-toucan-3sex.squarespace.com/register
PW: PYogi2024!!

You mean

• Remove both text
• Add a text in middle with name: Show All Schools and link to directory list page?

3 hours ago, tuanphan said:

You mean

• Remove both text
• Add a text in middle with name: Show All Schools and link to directory list page?

Yes, sorry for any confusion. I'd like the text that says "Show All Schools" to be left aligned, but if centered on the page is the only option, I will take it!

Since I've posted this, I made the site live. You can see the registration page here: https://petiteyogi.com/register

Thank you!

On 8/14/2024 at 8:01 PM, socialstylate said:

Yes, sorry for any confusion. I'd like the text that says "Show All Schools" to be left aligned, but if centered on the page is the only option, I will take it!

Since I've posted this, I made the site live. You can see the registration page here: https://petiteyogi.com/register

Thank you!

How about right text? Remove left + right, then add Show All Schools on left side?

On 8/17/2024 at 3:59 AM, tuanphan said:

How about right text? Remove left + right, then add Show All Schools on left side?

That would be great! Do you know what code I need to use for this? Thank you!

22 hours ago, Lesum said:

@socialstylate Hi! You can add this code to Website > Pages > Website Tools > Code Injection > Header to display the custom pagination "Show All Schools."

<script>
document.addEventListener('DOMContentLoaded', function() {
    const anchorTag = document.createElement('a');
    anchorTag.href = 'https://petiteyogi.com/register';
    anchorTag.textContent = 'Show All Schools';
    anchorTag.className = 'custom-pagination item-pagination-title';

    const iconDiv = document.createElement('div');
    iconDiv.className = 'item-pagination-icon icon icon--stroke';
    iconDiv.innerHTML = `
        <svg class="caret-right-icon--small" viewBox="0 0 9 16">
            <polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline>
        </svg>
    `;

    anchorTag.prepend(iconDiv);

    const itemPagination = document.getElementById('itemPagination');

    if (itemPagination) {
        itemPagination.appendChild(anchorTag);
    }
});
</script>

<style>
.item-pagination-link--prev, .item-pagination-link--next {
    display: none !important;
} 

a.custom-pagination.item-pagination-title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 15px;
}

.custom-pagination .icon, .custom-pagination svg {
    width: 18px !important;
    height: 32px !important;
} 

#itemPagination {
    display: flex;
    justify-content: flex-start;
}
</style>

Let me know how it goes. Thanks! 

This looks great! Thanks so much for providing the code. One other request. Is there a way to update the code so that the caret/arrow is to the left of the "Show All Schools" text and is pointing left?

@socialstylate Hi! I just updated the code in my previous comment. Please remove the previous code and add the new code. 

23 hours ago, Lesum said:

@socialstylate Hi! I just updated the code in my previous comment. Please remove the previous code and add the new code. 

Thank you! I added the code from your previous comment and I don't see a change. You can see the page I'm looking at here: https://petiteyogi.com/register/avon-grove-intermediate-school

Do I have the code wrong?

@socialstylate The updated code isn't appearing on your site from my end; it’s still showing the previous code I shared. Please try adding the entire code again.

14 hours ago, Lesum said:

@socialstylate The updated code isn't appearing on your site from my end; it’s still showing the previous code I shared. Please try adding the entire code again.

I accidentally copied the code from when I quoted you - sorry about that. Thank you so much - the code works and it looks great!