Follow Me on Google News Follow Now!

How To Add Post Pagination To Your Blogger Website

Hii everbody welcome to gyanitheme.onlinin this post i will show you how to add stylish pagination in blogger post and i also showed you how to add post pagination to your blogger website for better experience. I had a comment asking me how to add reload to the post pagination in blogger website.

What is pagination?

Pagination is also known as paging which is the process of dividing a web document into discrete pages, either electronic pages or printed pages.

Types Of Pagination—

There are many types of pagination in Modern Blogger Themes. Some of them are listed below:
  • Simple Pagination
  • Active and Hoverable Pagination
  • Rounded Active and Hoverable Buttons
  • Hoverable Transition Effect 
  • Bordered Pagination
  • Etc..

Blogger Post Pagination Features—

So here, in My Post Pagination, we can see when we click on the second page we are taken to the second page over here but we don't have any page reload happening over here and when we click on the third page we are taken to the third page but the page is not being reloaded so in this post i'll show you how to add page reload to your post pagination now as far as user experience is concerned having less page reload can be a better user experience but if you absolutely need to have the reload functionality in the post pagination then you can read this post i will show you how to add page reload to your post pagination now we'll be continuing from the code..

Follow these steps to add post pagination in blogger post:—

Adding Javascript Code—

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click on Edit HTML
  4. Now Search for </body> Tag
  5. Now copy the code provided below and paste it above </body> tag

<script type="text/javascript">
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>

Adding CSS Code—

  1. After this , Go to your Blogger Theme and click Customize to access Blogger Theme Designer
  2. Then choose Advanced > Add CSS 
  3. Copy the following code and click Apply to Blog

.page-content {
max-width: 600px;
margin: 0 auto;
}
/* Copy the following code to Blogger */
.pagination-container {
display: flex;
justify-content: center;
}
.pagination-container .page-numbers-container {
display: flex;
font-size: 18px;
overflow: hidden;
font-weight: bold;
font-family: "Roboto", 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: #6161f7;
color: #fff;
}
/* Page Content */
.page-content .page {
display: none;
}
.page-content .page.active {
display: block;
}

Adding Html Code in Post—

  1. to show pagination in blogger post go to blogger dashboard
  2. go to posts section and select one post 
  3. here is two options for edit the post choose html mode and copy html code which i provided below
<div class="page-content">
<div class="page">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>
</div>


<div class="page">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>
</div>


<div class="page">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque repellendus quae, fuga delectus necessitatibus ipsum iste consequuntur recusandae dolores quam animi corrupti quidem nesciunt deserunt qui sit aut praesentium?
</p>
</div>

</div>

<div class="pagination-container">
<div class="page-numbers-container">

</div>
</div>

Conclusion—

Right now let's refresh the post and let's click on the second page number and we can see that we have a page reload and we are taken to the second page let's click on the third page number and we have reload and we are taken to the third page let's reload this page and we are taken back to the first page so that's how you can add page reload to your post pagination. if you have any doubts you can ask in the comments below.
Happy Blogging.....
Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

Post a Comment