Cách đây một thời gian mình có chia sẻ bài viết về cách chia nội dung bài viết thành nhiều trang với hiệu ứng slide và trong bài viết này, KiMiDev sẽ chia sẻ thủ thuật cách tạo phân trang trong bài viết với số điều hướng trên blogger
Xem Demo:
https://simpletemplatejp.blogspot.com/2016/12/your-custom-travel.html
Có thể bạn mình đã ghé thăm một trang tin tức hoặc trang đọc truyện tranh mà mỗi nội dung bài viết được chia thành nhiều trang, thường thì trong bài viết có nút Next mà khi chúng ta nhấn nút sẽ dẫn đến trang tiếp theo. Tương tự như vậy với các mẹo mà tôi sẽ đưa ra, cách thức hoạt động là chia một số đoạn nội dung của bài đăng thành nhiều phần theo ý muốn của bạn.
|
| Cách tạo trang trong bài viết trên blogger |
Một số lợi ích có thể nhận được nếu áp dụng các mẹo này bao gồm:
- Trang sẽ gọn gàng hơn, phù hợp với những bạn có bài viết dài và tiết kiệm dung lượng để khách không bị mỏi tay khi cuộn trang
- Thích hợp cho các trang tin tức và trang đọc truyện tranh
- Có thể được sử dụng làm điểm đánh dấu cho khách truy cập vào những trang nào sẽ tiếp tục đọc sau
- Tăng số lần xem Trang vì có chức năng làm mới trang khi nhấn nút điều hướng sang trang tiếp theo.
Đối với những bạn muốn thêm phương pháp này vào blog của mình, vui lòng làm theo các bước bên dưới.
Cách Thực Hiện
Bước 1: đăng nhập vào trang quản trị blogger --> chủ đề --> chỉnh sửa html
Bước 2: các bạn tìm cho mình thẻ </head> và thêm đoạn code bên dưới vào phía trên của thẻ </head>
<b:if cond='data:view.isSingleItem'>
<style>
/* Design by KimiDev */
.post-content,.pagearl br{display:none}.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{font-weight: 700;
background: #2196f3;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 8px 12px;
margin-right: 5px;
transition: ease .69s!important;}.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>
Bước 3: tiếp tục tìm cho mình Thẻ </body> và thêm đoạn code bên dưới vào phái trên của thẻ </body>
<script>
//<![CDATA[
function get_n(ki){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===ki)return void 0===o[1]||o[1]}$(document).ready(function(){var ki=get_n("ki");$(".post-content").hide(),void 0===ki?$(".content_1").show():$(".content_"+ki).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+"?ki="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==ki&&$(".buttonar.n1").toggleClass("arlinapage"),ki==ki&&$(".buttonar.n"+ki).toggleClass("arlinapage")});
//]]>
</script>Bước 4: lưu chủ đề của các bạn lại
Bước 5: Tạo một bài viết mới và thêm đoạn đoạn html này vào để chúng ta có thể tạo Phân trang trong bài viết.
<div class="post-content content_1">
Content Post
</div>
<div class="post-content content_2">
Content Post
</div>
<div class="post-content content_3">
Content Post
</div>
<div class="post-content content_4">
Content Post
</div>
<div class="post-content content_5">
Content Post
</div>
Lưu ý: hãy thay thế "Content Post" thành nội dung bài viết của các bạn ứng với trang tương ứng.
Bước 6: Thêm đoạn mã tạo số trang này vào cuối bài viết của các bạn hoặc đầu bài viết. tùy các bạn.
<div class="arlinapage">
</div>
<div class="pagearl">
</div>hoặc nếu như các bạn muốn thêm mã này tự động mà không phải thêm thủ công thì các bạn hãy thêm đoạn mã này vào phần chủ đề và tìm đến đoạn code <data:post.body/> và thêm đoạn code bên trên vào phía dưới của thẻ <data:post.body/>
Được rồi, đó là tất cả từ kimidev về cách Chia các Trang trong Bài đăng theo Số Điều hướng. Hy vọng hữu ích cho bạn bè và mọi người nhé. chúc mọi người thành công nhé.
Nếu như có thắc mắc gì thì anh em có thể comment bên dưới mình sẽ giải đáp cho anh em nhé.
