Ngắt bài viết thành nhiều trang mà không loading nhiều lần

Posted by on
Trên blog của bạn đôi khi sẽ có những bài viết rất dài, nó sẽ làm bố cục xấu đi, nếu bạn muốn ngắt bài viết thành nhiều phần thì bài viết hôm nay của mình sẽ giải quyết tốt vấn đề đó của bạn bởi vì wiget này sẽ ngắt(chia) bài viết thành nhiều trang nhưng chỉ load một lần duy nhất.

#Sử dụng một lần

Khi viết bài mà muốn ngắt thành nhiều trang thì
1. Chuyển sang chế độ viết HTML
2. > Dán code dưới vào
<style>

.post-pagination {

    margin: 20px auto;

    text-align: center;

    width: 100%;

}

.button_1, .button_2, .button_3 {

    border: 2px solid #f4655f;

    font-weight: 900;

    padding: 6px 36px;

    color:#f4655f;

    transition:ease 0.69s !important;

}

.button_1:hover, .button_2:hover, .button_3:hover {

    background: none repeat scroll 0 0 #f4655f;

    color: #fff;

    text-decoration: none;

}

</style>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery('.button_1').click(function(){

jQuery('.content_1').fadeIn('slow');

  jQuery('.content_2').fadeOut('fast');

jQuery('.content_3').fadeOut('fast');

jQuery(this).css('background','#F4655F');

jQuery(this).css('color','#fff');

jQuery('.button_2').css('background','#fff');

jQuery('.button_2').css('color','#F4655F');

jQuery('.button_3').css('background','#fff');

jQuery('.button_3').css('color','#F4655F');

return false;

});

jQuery('.button_2').click(function(){

jQuery('.content_1').fadeOut('fast');

  jQuery('.content_2').fadeIn('slow');

jQuery('.content_3').fadeOut('fast');

jQuery(this).css('background','#F4655F');

jQuery(this).css('color','#fff');

jQuery('.button_1').css('background','#fff');

jQuery('.button_1').css('color','#F4655F');

jQuery('.button_3').css('background','#fff');

jQuery('.button_3').css('color','#F4655F');

return false;

});

jQuery('.button_3').click(function(){

jQuery('.content_1').fadeOut('fast');

  jQuery('.content_2').fadeOut('fast');

jQuery('.content_3').fadeIn('slow');

jQuery(this).css('background','#F4655F');

jQuery(this).css('color','#fff');

jQuery('.button_1').css('background','#fff');

jQuery('.button_1').css('color','#F4655F');

jQuery('.button_2').css('background','#fff');

jQuery('.button_2').css('color','#F4655F');

return false;

});

});

</script>



<div class="content_1">



Add content here



</div>



<div class="content_2" style="display: none;">



Add content here



</div>



<div class="content_3" style="display: none;">



Add content here



</div>



<div class="post-pagination">

<a class="button_1" href="#">1</a>

<a class="button_2" href="#">2</a>

<a class="button_3" href="#">3</a>

</div>



<Script src = "// ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
Thay thế các đoạn màu cam thành các phần nội dung mà bạn đã chia.

#Sử dụng lâu dài

1. Mẫu > Chỉnh sửa HTML
2. > Tìm thẻ ]]></b:skin>
3. > Dán code dưới vào bên dưới thẻ vừa tìm
<b:if cond='data:blog.pageType != &quot;index&quot;'> <style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script></b:if>
4. > Tìm thẻ </head>
5. > Thêm code dưới vào trên thẻ </head>
<Script src = "// ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
6. > Save
Khi muốn thêm phần ngắt bài viết này vào thì bạn chuyển sang chế độ viết HTML và dán code dứoi vào.
<div class="content_1">



Add content here



</div>



<div class="content_2" style="display: none;">



Add content here



</div>



<div class="content_3" style="display: none;">



Add content here



</div>



<div class="post-pagination">

<a class="button_1" href="#">1</a>

<a class="button_2" href="#">2</a>

<a class="button_3" href="#">3</a>

</div>
Các bạn cũng thay phần màu cam thành nội dung mà các bạn đã chia.

#Lưu ý khi sử dụng

1. > Khi làm Demo mình cũng đã gặp một rắc rối nhỏ xin nói cho các bạn cùng biết. Đó là khi sử dụng tiện ích ngắt bài viết này thì tất cả nội dung của bài viết đều phải nằm trong tiện ích này - nghĩa là khi sử dụng tiện ích này bài viết của bạn bắt buộc phải chia thành 3 rồi thế vào 3 đoạn màu cam, không có bất cứ một nội dung gì nằm ngoài tiện ích này. Nếu không thì bạn gặp rắc rối về phần liên kết với mấy cái button.
2. > Mình sẽ lấy ví dụ cho các bạn thấy:
  • Khi viết thì các button sẽ là
<a class="button_1" href="#">1</a>

<a class="button_2" href="#">2</a>

<a class="button_3" href="#">3</a>
  • Tuy nhiên, sau khi xuất bản, thì nó biến thành dạng như dưới. Như vậy thì mấy cái button đó sẽ không sử dụng được nữa.
<a class="button_1" href="https://www.blogger.com/blogger.g?blogID=4153485165712775365#">1</a>
<a class="button_2" href="https://www.blogger.com/blogger.g?blogID=4153485165712775365#">2</a>
<a class="button_3" href="https://www.blogger.com/blogger.g?blogID=4153485165712775365#">3</a>
3. > Cách khắc phục là lấy một đoạn code mới và làm lại từ đầu, bạn đừng cố gắng xóa phần liên kết tự động thêm vào làm gì cho mệt.
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

  1. UnknownDecember 20, 2014 at 4:42 PM

    anh ơi,em đã thử và rất hiệu quả !
    Song có một vấn đề nảy sinh : khi click xem phân trang thứ 2, 3,.... bài viết không tự kéo về đầu văn bản của trang đó, Như vậy đồng nghĩa với việc người đọc sẽ phải mất một động tác nữa là kéo thanh thước dọc về đầu đoạn văn bản của phân trang đó.
    Có cách nào để khi click vào phân trang thì nó trở về đầu văn bản của phân trang đó không anh ạ? thanks anh !

    ReplyDelete
    Replies
    1. Quoc Khanh BuiDecember 21, 2014 at 8:08 AM

      Cảm ơn bạn đã báo lỗi!!! Mình đã tìm cách sửa và đã thành công, bạn có thể xem lại demo để xem kết quả.
      Để có thể "khi click vào phân trang thì nó trở về đầu văn bản của phân trang" thì bạn hãy dùng code script mới mà mình cập nhật cuối bài viết. :) :)

      Delete
  2. UnknownJuly 24, 2015 at 5:06 PM

    Anh ơi,
    Lúc đầu khi nhấn vào trang số 2,3 thì bài viết load bình thường, chỉ không kéo về đầu trang thôi. Sau đó thì bị lỗi, giờ khi nhấn vào trang số 2,3 nó lại nhảy về đầu trang 1. Em đã kiểm tra kỹ lại trong phần bài viết rồi nhưng vẫn không hiểu lỗi là do đâu, anh xem giúp giùm nha, thank anh!
    Link URL bài post đây ạ:
    http://charmiingtang.blogspot.com/2015/06/mat-ngu-du-thai-cham-ngo-bangkok-2.html#

    ReplyDelete
    Replies
    1. Quoc Khanh BuiJuly 24, 2015 at 7:12 PM

      Phần code mà bạn đang dùng đã bị lỗi rồi, bạn hãy viết lại một bài mới với code trên, Code trên chưa hỗ trợ việc nhảy lên đầu trang. :) :) :)

      Delete
    2. UnknownJuly 25, 2015 at 9:32 AM

      Anh trả lời lại nhanh quá, em cám ơn anh.
      Không biết là anh nói phần code nào nhưng em đã thử tạo bài đăng mới mà nó vẫn như vậy luôn, tức là xem trang đầu thì bình thường nhưng sang trang sau nó không hiện lên nội dung của trang khác mà vẫn ở trang ban đầu. Sáng nay mình thử thay phần code dưới thẻ như của anh thì đã chạy bình thường. :D

      Delete
    3. Quoc Khanh BuiJuly 26, 2015 at 9:28 AM

      Thế thì tốt rồi :ng

      Delete
    4. UnknownJuly 27, 2015 at 11:02 AM

      Còn vấn đề nữa là sau khi phân trang xong,ở phần soạn bài viết, em vào chế độ Viết chứ không phải Html để thêm chú thích cho ảnh thì nó chỉ hiển thị nội dung trang đầu. Chỉ khi quay lại Html nó mới hiện toàn bộ nội dung. Có cách nào vào được những trang sau trong chế độ Viết không anh?

      Delete
  3. Quoc Khanh BuiJuly 27, 2015 at 6:02 PM

    Lí do mà nội dung của trang thứ 2 và 3 bị ẩn là do phần style="display: none;" nằm trong thẻ <div class="content_2" style="display: none;"> và <div class="content_3" style="display: none;">

    Cho nên đầu tiên bạn chuyển sang soạn thảo HTML và xóa style="display: none;" nằm trong hai thẻ mà mình vừa nói.

    Sau đó bạn chuyển sang soạn thảo thông thường thì cả 3 trang sẽ hiện thị ra, bạn có thể chỉnh sửa bình thường.

    Cuối cùng khi soạn thảo xong, bạn phải thêm style="display: none;" vào lại trong hai thẻ như ban đầu.

    ReplyDelete
    Replies
    1. UnknownJuly 29, 2015 at 10:38 AM

      Cám ơn anh nhé, thì ra là như vậy!
      Trước em có thấy một bạn hỏi anh vấn đề không load được đầu trang khi bấm vào trang 2,3. Em nhớ anh có viết một đoạn để thay thế mà giờ không thấy nữa.

      Delete
    2. Quoc Khanh BuiJuly 29, 2015 at 5:55 PM

      Code đó bị lỗi bạn ạ, mình sẽ viết lại code khác, khi nào xong mình sẽ thông báo cho bạn sau.

      Delete

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.