How to add multiple pages in blogger

1. Multiple Page's in One post :-

To create multiple pages within a single blog post on Blogger, you need to manually add HTML code with page breaks, essentially dividing your content into distinct sections that can be navigated through using pagination buttons, which you can implement using custom JavaScript and CSS code within your Blogger template; this is not a native Blogger feature, so you'll need to add the code yourself.

How to apply:-

Copy Html, Script and CSS code and paste in blog post then add your content under "page-content" class section.

if you want to use this in multiple post's then you can paste CSS code above "]]></b:skin>" tag, in blogger themes Edit HTML section. Then remove"<script></script>" tag.

And Script code paste in above</body> tag.

HTML Code

 
 <!-----Multiple Page Html code------>

<div class="page-content">
<div class="page">
   Page1 Content Here
</div>
<div class="page">       
    Page2 Content Here
</div>        
<div class="page">       
    Page3 Content Here
</div>       
<div class="page">       
     Page4 Content Here
</div></div>

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

Script Code

            <!------JavaScript------->

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

CSS Code

     <!-----Multiple Page CSS Code------>

<style>

.pagination-container {
    display: flex;
    margin: 10px;
    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 1000ms;
}

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

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

/* Page Content */

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

.page-content .page.active {
    display: block;
}

</style>

use only one CSS code witch you want to use.

CSS Code

     <!-----Multiple Page CSS Code------>

<style>

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

.pagination-container .page-numbers-container {
    display: inline-block;
}

.page-numbers-container .page-number {
    padding: 8px 25px;
    display: inline-block;
    margin: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    transition: all 1000ms;
}

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

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

/* Page Content */

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

.page-content .page.active {
     display: block;
}

</style>

2. Multiple Page's in multiple post :-

Use This pagination code when you want to provide user's defferent-defferent post's link.

How to apply:- Copy HTML and CSS code and paste every pages where you wants to provide button and add all posts links under a href="#" section then transfer class="active" tag in opened post link for opened post green colour, in ( « ) option add previous post link and in ( » ) option add next Post link.

HTML Code

 
      <!--Pagination Button-->


<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">11</a>
  <a href="#">12</a>
  <a href="#">»</a>
</div>

 

CSS Code

<style>
  
.pagination {
  display: inline-block;
  margin: 10px;
  justify-content: center;
}

.pagination a {
  float: left;
  color: black;
  margin: 3px;
  padding: 8px 25px;
  border-radius: 5px;
  transition: all 1000ms;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pagination a:hover:not(.active) {
  background: #c5c5e9;
  border-radius: 5px;
}

.pagination a.active {
  color: #fff;
  background: #4CAF50;
  border-radius: 5px;
}

  
</style>

  