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}
Đánh giá của bạn về bài viết này?

Trường

Chia sẻ những gì mình biết là cách ý nghĩa nhất để lưu lại giá trị của đời mình cho cộng đồng. Cho đi là cách nhận lại thông minh nhất. facebook flickr share

Nếu bổ ích hãy mời mình 1 ly nước mía 5k qua MoMo nhé: 085.45.74.559

4
Nhận xét

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn (Tích vào ô Thông báo cho tôi).
➥ 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, sau đó sao chép link ảnh dán vào khung bình luận.
➥ Không spam trong khung bình luận, hạn chế viết tắt. Xem quy định bình luận tại đây.

  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