Chắc hẳn bạn đã từng truy cập vào các trang tin tức hoặc trang đọc truyện tranh, nơi nội dung bài viết được chia thành nhiều trang nhỏ. Một nút "Next" (Tiếp theo) đơn giản, nhưng khi nhấn vào, bạn được dẫn đến phần nội dung kế tiếp, giúp việc đọc trở nên nhẹ nhàng hơn.
Có bao giờ bạn tự hỏi liệu mình có thể áp dụng cách này cho blog của mình không? Tin vui là, điều đó hoàn toàn khả thi!
Cách chia nội dung bài viết thành nhiều trang không chỉ là thủ thuật, mà còn là nghệ thuật tổ chức nội dung. Dưới đây là một vài lý do khiến bạn nên thử:
Lợi ích của việc chia nội dung thành nhiều trang
1. Tạo trải nghiệm đọc mượt mà và dễ chịu
Với những bài viết dài, việc chia nhỏ nội dung giúp người đọc không bị "choáng" khi nhìn thấy một khối văn bản khổng lồ. Mỗi trang nhỏ giống như một điểm dừng chân, giúp họ thưởng thức nội dung từng chút một.
2. Giao diện gọn gàng, chuyên nghiệp
Phương pháp này đặc biệt phù hợp với các trang tin tức, truyện tranh, hoặc bài viết có nội dung dài và chi tiết. Người đọc sẽ cảm nhận được sự chỉn chu và tỉ mỉ trong cách trình bày.
3. Dễ dàng quay lại đọc tiếp
Chia nội dung thành từng phần giúp người đọc dễ dàng đánh dấu được họ đã dừng ở đâu. Điều này khiến trải nghiệm đọc trở nên thoải mái hơn và tăng khả năng họ quay lại blog của bạn.
4. Tăng lượt xem và tương tác trên trang
Mỗi lần người đọc nhấn vào nút chuyển trang, đó là một lượt tải mới. Điều này không chỉ tăng chỉ số pageviews, mà còn kéo dài thời gian tương tác của họ với blog của bạn.
Mang lại giá trị vượt xa một thủ thuật nhỏ
Phương pháp này không chỉ giúp bạn quản lý nội dung hiệu quả hơn mà còn nâng cao chất lượng trải nghiệm của người đọc. Nó cho thấy bạn thực sự quan tâm đến cảm giác của họ, và điều đó sẽ khiến blog của bạn trở nên đáng nhớ hơn.
Nếu bạn đã sẵn sàng, hãy bắt đầu ngay bằng cách làm theo các bước hướng dẫn dưới đây! Blog của bạn sẽ sớm trở nên gọn gàng và chuyên nghiệp hơn bao giờ hết. 😊
Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng
Như thường lệ, hãy mở trang Blogger > Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Thêm mã CSS này trước </head>
<b:if cond='data:view.isSingleItem'>
<style>
/* Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng */
.post-content,.pagearl br{display:}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>
</b:if>Thêm đoạn mã dưới vào trước </body>
<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
function get_n(trang){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===trang)return void 0===o[1]||o[1]}$(document).ready(function(){var trang=get_n("trang");$(".post-content").hide(),void 0===trang?$(".content_1").show():$(".content_"+trang).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?trang="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==trang&&$(".buttonar.n1").toggleClass("arlinapage"),trang==trang&&$(".buttonar.n"+trang).toggleClass("arlinapage")});
//]]>
</script>
</b:if> Sau đó nhấp vào nút Lưu chủ đề.
Tiếp theo, để thêm mã gọi, hãy mở trình chỉnh sửa bài viết và chèn đoạn mã sau vào Chế độ xem HTML (không phải Chế độ xem soạn thư).
<div class="post-content content_1">
<b>Nội dung 1:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia.
</div>
<div class="post-content content_2">
<b>Nội dung 2:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia.
</div>
<div class="post-content content_3">
<b>Nội dung 3:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia.
</div>
<div class="post-content content_4">
<b>Nội dung 4:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia.
</div>
<div class="post-content content_5">
<b>Nội dung 5:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia.
</div>Phần Nội dung 1: Chào mừng bạn đến với Blog Chitose2D... Cần được thay bằng nội dung bài viết của bạn. Các thẻ từ content_1 đến content_5 đại diện cho số thứ tự của các phần nội dung mà bạn muốn chia. Nếu muốn thêm trang mới, bạn chỉ cần tiếp tục đánh số theo thứ tự, ví dụ thay content_5 bằng content_6, content_7, và cứ tiếp tục như thế với số lượng trang mà bạn muốn.
Ví dụ bạn có thể thêm trang mới bằng mã dưới như này:
<div class="post-content content_6"> <b>Nội dung 5:</b> Chào mừng bạn đến với Blog Chitose2D, đây là blog có chủ đề xoay quanh mấy thứ như Anime/Manga/Light Novel, chứ không phải là một trang web hay blog tạp chí, càng không phải theo kiểu tin tức anime như đại trà các trang web tạp chí ngoài kia. </div>Sau đó, thêm mã điều hướng dưới đây vào cuối bài đăng.
<div class="arlinapage">
</div>
<div class="pagearl">
</div>Tuy nhiên, nếu bạn muốn hiển thị mã điều hướng tự động trong mỗi bài đăng, bạn có thể thêm đoạn mã trên vào bên dưới mã <data:post.body/> (Phần nội dung bài đăng chỉ dành cho trang bài đăng). Ví dụ cách áp dụng như sau:
<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>Đây là giao diện mặc định 👇
Thêm vào cuối bài viết đoạn CSS bên dưới nếu bạn muốn giao diện tối giản.
Đây là giao diện tối giản 👇
<style type='text/css'>
/* Đây là css giao diện tối giản. */
.post-content,.pagearl br{display:}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}
</style>Hoặc thay bằng mã CSS này nếu bạn muốn thêm hiệu ứng với chuyển động Gradient.
Đây là giao diện hiệu ứng chuyển động Gradient 👇 Bạn có thể xem demo trực tiếp dưới cuối bài viết nhé!
<style>
/* Đây là giao diện hiệu ứng chuyển động Gradient */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
</style>
Xong rồi đó, nếu có bất kỳ khó khăn thắc mắc nào thì hãy để lại bình luận bên dưới. Kỳ tới sẽ ra thêm code phân trang trong bài viết với cách làm đơn giản hơn, hãy cùng đón chờ nhé! 🥰
Nguồn: https://www.idblanter.com/2017/12/buat-pagination-di-postingan-blog.html
Hashtag: Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng
Không có nhận xét nào
Đăng nhận xét