How To Add Post Pagination In Blogger Website.

Is it true or not that you are searching for a method for parting long Blogger posts into various pages?

How To Add Post Pagination In Blogger Website.

In this Blogger instructional exercise, I will tell you the best way to add present pagination on your blogger site. Thus, you can break a solitary long blog entry into various pages in Blogger.

Thus, we should comprehend what is post pagination and what are the benefit and drawbacks of utilizing it on your blog entries.

What is Post pagination?

Post pagination is the method to part lengthy blog entries into various pages and clients can explore to different pages by tapping on the following and past buttons.

Post Pagination works on the lucidness of your substance and clients can undoubtedly process your substance and read the part they are keen on.

It likewise helps in expanding site hits and Promotion income as client collaboration will build the website page.

In this way, how about we perceive how to part Blogger posts into numerous pages.

How to Add Post Pagination in Blogger?

To add post pagination in Blogger, follow the means given underneath.

Step-1: Go to Blogger dashboard and Open a blog entry in HTML view.

Step-2: Presently you need to part the blog entries in the underneath design.

<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>

Step-3: Here replace (supplant) the page in the middle between div classes. (like First page content replaces <!- - Page 1 substance Here- - > )

Step-4:Now paste  (Presently glue) the pagination button code after all the blog entry contents.

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

Step-5:  Now  (Presently) you need to paste (glue) the CSS code in the blog post (entry) or 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: #f5e871;
    cursor: pointer;
}

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

/* Page Content */

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

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

Step-6: Now paste (Presently glue) the Javascript code just (soon) after the CSS code. (needed for Button click)(required for Button click)

<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 publish (Presently distribute) your blog posts (entries) and you have successfully (effectively) added the post pagination to your Blogger website (site).

In this way (Along these lines), you can easily break (undoubtedly break) long posts into multiple (different) pages in Blogger and give your users a better user (clients a superior client) experience on the  website (site).