How to Split Long Post in to Multiple Pages in Blogger

 Hi to all in this article I am going to tell you all about how to split long posts into multiple pages in blogger easily in just few minutes. 

So, you need to read this article carefully and completely to get clear understanding about adding post pagination in your blogger website pots without any error.

Post Pagination

Basically post pagination is a technique to split or break long blog posts into few multiple pages and the users can navigate to other pages easily by clicking on the next and previous buttons.

This post pagination will improves the readability of your published content and also users can easily understand your content and can read the section, which they are interested in.

It will also helps in increasing page views and also increases ad revenue as user interaction will increase in the webpage.

Steps to Add Post Pagination in Blogger

First of all you need to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials.

Now you need to open any one blog post to add the post pagination feature in it.

And now you need to split the blog posts in the below provided format carefully.

<div class="page-content">

        <div class="page active">
        <!--Page 1 content Here-->
        </div>

        <div class="page">
        <!--Page 2 content Here-->
        </div>

        <div class="page">
        <!--Page 3 content Here-->
        </div>
 </div>

Now you need to replace the page content in between the div classes. for example First page content replaces <!--Page 1 content Here-->.

And now you need to paste the pagination button code after all the blog post contents.

<!--Pagination Button-->
<div class="pagination-container">
        <div class="page-numbers-container">
            
        </div>
    </div>

Now you have to paste the CSS code in the blog post or you can add it in the theme code.

<style>
/* Post Pagination by Key2Blogging */

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination-container .page-numbers-container {
    display: flex;
    font-size: 18px;
    overflow: hidden;
    font-weight: bold;
    font-family: "raleway", sans-serif;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.page-numbers-container .page-number {
    padding: 8px 24px;
    transition: all 400ms;
}

.page-numbers-container .page-number:hover {
    background: #c5c5e9;
    cursor: pointer;
}

.page-numbers-container .page-number.active {
    background: #17A589;
    color: #fff;
}

/* Page Content */

.page-content .page {
    display: none;
}

.page-content .page.active {
    display: block;
}
</style>

Now you need to paste the JavaScript code just after the CSS code.

<script> 
const pages = document.querySelectorAll(".page-content .page");
const pageNumbersContainer = document.querySelector(".page-numbers-container");

if (pageNumbersContainer) {

 let pn = localStorage.getItem("pageNumber") ? localStorage.getItem("pageNumber") : 0;

 const createPagination = () => {
     pages.forEach((p, i) => {
         const pageNumber = document.createElement("div");
         pageNumber.classList.add("page-number");
         pageNumber.textContent = i + 1;
         pageNumber.addEventListener("click", () => {
    localStorage.setItem("pageNumber", i);
    location.reload();
         })

         pageNumbersContainer.appendChild(pageNumber);
     })

     document.querySelector(".page-number").classList.add("active");
     pages[0].classList.add("active");
 }

 createPagination();

 const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");

 const activatePage = (pageNumber) => {
     pages.forEach(p => {
         p.classList.remove("active");
     })

     pages[pageNumber].classList.add("active");

     pageNumbers.forEach(p => {
         p.classList.remove("active");
     })

     pageNumbers[pageNumber].classList.add("active");

  localStorage.removeItem("pageNumber");
  history.scrollRestoration = "manual";
 }

 activatePage(pn);
}
</script>

Now after adding the above codes, you can publish your blog posts and you have successfully added the post pagination in your Blogger website.

Note

Make sure that you added the above codes in their respective places as given in above steps.

Don't modify or change the above provided codes, if you modify then code might not work properly.

Conclusion