Chia các trang trong bài viết theo số điều hướng cho Blogspot

Có thể bạn đã 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 thủ thuật mà mình hướng dẫn sau đây, cách thực hiện là chia một vài đoạn nội dung của bài đăng thành nhiều phần theo ý muốn của bạn.

Chia các trang trong bài viết theo số điều hướng cho Blogspot

Một số lợi ích có thể nhận được nếu áp dụng 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, 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 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.

$ads={1}

Chia các trang trong bài viết theo số điều hướng

Chuyển đến 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>
/* Membagi Halaman di Postingan | TruongBlogger.Top */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgbaundefined0,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 rgbaundefined0,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 rgbaundefined0,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 mã sau đây trước </body>.

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
function get_nundefinedhalaman){var o,t,e=decodeURIComponentundefinedwindow.location.search.substringundefined1)).splitundefined"&");forundefinedt=0;t<e.length;t++)ifundefinedundefinedo=e[t].splitundefined"="))[0]===halaman)return void 0===o[1]||o[1]}$undefineddocument).readyundefinedfunctionundefined){var halaman=get_nundefined"halaman");$undefined".post-content").hideundefined),void 0===halaman?$undefined".content_1").showundefined):$undefined".content_"+halaman).showundefined);var o=$undefined".post-content").length;ifundefined0!=o)forundefinedi=1;i<=o;i++){var t=window.location.pathname;$undefined".pagearl").appendundefined$undefined'<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $undefined".pagearl").hideundefined);void 0==halaman&&$undefined".buttonar.n1").toggleClassundefined"arlinapage"),halaman==halaman&&$undefined".buttonar.n"+halaman).toggleClassundefined"arlinapage")});
//]]>
</script>
</b:if>

Sau đó nhấp vào nút Lưu chủ đề.

Tiếp theo đối với mã trong bài viết, vui lòng mở trình chỉnh sửa bài đăng và thêm đánh dấu sau vào tab HTML.

<div class="post-content content_1">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_2">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_3">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_4">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_5">
NỘI DUNG BÀI VIẾT
</div>

Đối với NỘI DUNG BÀI VIẾT, nó được thay thế bằng nội dung của bài đăng và đối với content_1 tới content_5, nó cho biết số điều hướng của nội dung bài đăng mà bạn muốn chia sẻ. Để thêm trang bạn muốn tách, chỉ cần thêm số từ content_6, v.v...{alertSuccess}

Ví dụ:

<div class="post-content content_4">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_5">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_6">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_7">
NỘI DUNG BÀI VIẾT
</div>
<div class="post-content content_8">
NỘI DUNG BÀI VIẾT
</div>

Sau đó thêm mã điều hướng bên dưới vào cuối bài.

<div class="arlinapage">
</div>
<div class="pagearl">
</div>

Tuy nhiên, nếu bạn muốn tự động hiển thị mã điều hướng trong mỗi bài đăng, bạn có thể thêm mã ở trên vào bên dưới mã <data:post.body/> (Phần thân bài dành riêng cho các trang đăng). Tuy nhiên nếu bạn chưa xác định được thì hãy nên thử dưới từng mã nhé!

<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>

Xong và xem kết quả trên blog của bạn.

{getButton} $text={Xem kết quả} $icon={preview} $color={#27ae60}

Thay đổi mã CSS nếu bạn muốn thêm nó với giao diện tối giản

<style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgbaundefined0,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>
{getButton} $text={Xem kết quả} $icon={preview} $color={#27ae60}

Hoặc thay thế nó bằng mã CSS này nếu bạn muốn thêm nó với chế độ xem hoạt hình Gradient

<style>
/* Membagi Halaman di Postingan */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgbaundefined0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradientundefined-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 rgbaundefined0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgbaundefined255,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 rgbaundefined0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgbaundefined255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgbaundefined0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgbaundefined255,255,255,.95);color:#0984e3}
</style>
{getButton} $text={Xem kết quả} $icon={preview} $color={#27ae60}
QTV

Xin chào các bạn. Khi bạn ghé thăm đến đây thì những gì ở đây là những thứ bạn đang cần tìm kiếm. Bạn chỉ mất khoảng 2 phút để có thể hiểu và làm được. Nhưng mình mất 2 giờ đồng hồ để tạo ra chúng. Vậy nên nếu thấy bài viết hay hãy chia sẻ giúp mình nhé! google facebook

4
Nhận xét

Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang Upload Image, sao chép link ảnh vào khung bình luận.

  1. Cảm ơn ad, đang cần luôn.

    Trả lờiXóa
  2. Viết một bài share các code trong Online Tools với em <3

    Trả lờiXóa
    Trả lời
    1. Dạ, để nào rảnh em publish bài share tools cho anh cùng dùng :D

      Xóa
Báo link hỏng | Hỗ trợ kỹ thuật | Khắc phục quá giới hạn lượt tải
TruongBlogger là website chia sẻ miễn phí các thủ thuật phần mềm cũng như phần cứng trong lĩnh vực công nghệ. Các phần mềm được chia sẻ trên TruongBlogger nên dùng cho mục đích dùng thử. Nếu thấy phần mềm tốt, hãy mua bản quyền để ủng hộ tác giả.
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" bạn hãy tắt AdsBlock và dành thời gian click QUẢNG CÁO để ủng hộ mình nhé!