To implement the functionality on your Blogger blog, follow these steps:
1. Open Blogger:
- Log in to your Blogger account.
2. Go to your page or Blog Post and choose html.
3. Paste below two line at upper side.
<!--paste below code where to start your content - upper side -->
<div class="page-content">
<div class="page active">
.
4. Paste below where to break page
<!--where to break page -->
Step 2:
<!--2 Between Paragraph pagination -->
</div>
<div class="page">
<!--End -->
5. Add below code at end of your content or paragraph
Step 3:
<!-- 3. Code added in Bottom only >
<!-- End of Page Content -->
</div> </div>
<!-- End -->
..
Step 4:
<!-- Pagination Button -->
<!-- Next and Previous Buttons with Styling -->
<button id="prev-btn" class="pagination-button">Previous</button>
<button id="next-btn" class="pagination-button">Next</button>
<!-- Show Page Number -->
<br><br>
<div class="pagination-container">
<div class="page-numbers-container"></div>
</div>
<!-- End -->
<!--Pagination Button-->
<div class="pagination-container">
<div class="page">Page 1 Content</div>
<div class="page">Page 2 Content</div>
<div class="page">Page 2 Content</div>
<!-- Add more pages as needed -->
</div>
<div class="page-numbers-container"></div>
<style>
/* Stylish Pagination Button Styles */
.pagination-button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.pagination-button:hover {
background-color: #2980b9;
}
/*Stylish Post Pagination for Numbers */
.pagination-container {
display: flex;
justify-content: center;
}
.pagination-container .page-numbers-container {
display: flex;
font-size: 12px;
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: 6px 20px;
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>
<script>
const totalPages = 8; // Change this to the desired total number of pages
const pages = document.querySelectorAll(".page-content .page");
const pageNumbersContainer = document.querySelector(".page-numbers-container");
if (pageNumbersContainer) {
let currentPage = localStorage.getItem("pageNumber") ? parseInt(localStorage.getItem("pageNumber")) : 0;
const createPagination = () => {
for (let i = 0; i < totalPages; i++) {
const pageNumber = document.createElement("div");
pageNumber.classList.add("page-number");
pageNumber.textContent = i + 1;
pageNumber.addEventListener("click", () => {
setCurrentPage(i);
});
pageNumbersContainer.appendChild(pageNumber);
}
document.querySelector(".page-number").classList.add("active");
pages[currentPage].classList.add("active");
};
const setCurrentPage = (pageNumber) => {
if (pageNumber >= 0 && pageNumber < totalPages) {
currentPage = pageNumber;
localStorage.setItem("pageNumber", currentPage);
updatePagination();
scrollToTop(); // Scroll to the top when changing the page
}
};
const updatePagination = () => {
pages.forEach((p) => {
p.classList.remove("active");
});
pages[currentPage].classList.add("active");
const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");
pageNumbers.forEach((p, i) => {
p.classList.remove("active");
if (i === currentPage) {
p.classList.add("active");
}
});
localStorage.removeItem("pageNumber");
history.scrollRestoration = "manual";
};
const scrollToTop = () => {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
};
const nextPage = () => {
setCurrentPage(currentPage + 1);
};
const previousPage = () => {
setCurrentPage(currentPage - 1);
};
createPagination();
document.getElementById("prev-btn").addEventListener("click", previousPage);
document.getElementById("next-btn").addEventListener("click", nextPage);
}
</script>
<!--End -->
<br><br>
7. Save Code and check.
