Hướng dẫn tạo phân trang bài đăng cho Blogger

Trong hướng dẫn này, Admin sẽ chỉ cho bạn cách thêm phân trang bài đăng vào trang web blogger của bạn. Vì vậy, bạn có thể chia một bài đăng blog dài thành nhiều trang trong Blogger.

Vì vậy, chúng ta hãy hiểu phân trang bài viết là gì, cũng như ưu điểm và nhược điểm của việc sử dụng nó trên các bài đăng blog của bạn là gì.

{tocify} $title={Nội dung bài viết}

Phân trang bài viết là gì?

Phân trang bài viết là kỹ thuật chia các bài đăng trên blog dài thành nhiều trang và người dùng có thể điều hướng đến các trang khác bằng cách nhấp vào nút tiếp theo và nút trước đó.

Phân trang bài đăng cải thiện khả năng đọc nội dung của bạn và người dùng có thể dễ dàng đọc nội dung của bạn và đọc phần họ quan tâm.

Nó cũng giúp tăng lượt xem trang và Doanh thu quảng cáo vì tương tác của người dùng sẽ tăng trang web.

Vì vậy, chúng ta hãy xem cách chia các bài đăng trên Blogger thành nhiều trang.

Làm thế nào để thêm phân trang bài đăng trong Blogger?

Để thêm phân trang bài đăng trong Blogger, hãy làm theo các bước dưới đây.

Bước 1: Đăng nhập vào Blogger và vào một bài đăng trên blog ở chế độ xem HTML.

Bước 2: Bây giờ bạn phải chia các bài đăng trên blog ở định dạng bên dưới.

<div class="page-content">

<div class="page active">

</div>

<div class="page">

</div>

<div class="page">

</div>
</div>

Bước 3: Tại đây thay thế nội dung trang giữa các lớp div.

Bước 4: Bây giờ dán mã nút phân trang sau tất cả nội dung bài đăng trên blog.

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

</div>
</div>

Bước 5: Bây giờ bạn phải dán mã CSS vào bài đăng trên blog hoặc trong mã Chủ đề.

<style>
/* Post Pagination by ReLub.Net */

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

Bước 6: Bây giờ dán mã Javascript ngay sau mã CSS.

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

Bây giờ hãy xuất bản các bài đăng trên blog của bạn và bạn đã thêm thành công phân trang bài đăng vào trang web Blogger của mình.

Lời kết

Bằng cách này, bạn có thể dễ dàng chia các bài đăng dài thành nhiều trang trong Blogger và cung cấp cho người dùng của bạn trải nghiệm người dùng tốt hơn trên trang web.

Nếu có vấn đề gì cần trao đổi thêm, bạn hãy để lại bình luận bên dưới.