Hướng dẫn tạo phân trang cho bài viết dài trên blogspot
Đăng Bởi : ADMin (Sáng Lập) *
Giới Tính : Nam - Durex Bảo Vệ Đàn Chim Việt
Đăng Lúc : 01/08/2018
Hướng dẫn tạo phân trang cho bài viết dài trên blogspot
Nếu có một bài viết quá dài sẽ dẫn tới không đẹp mắt, ảnh hưởng ít nhiều đến SEO, Và gây ức chế cho người xem khi cứ phải kéo chuột để xem. Vậy tại sao bạn không chia nhỏ nó ra bằng cách phân trang trên chính bài viết đó. Bài viết này VuongHiep.Com sẽ hướng dẫn các bạn cách phân trang cho bài viết quá dài.
Các bạn có thể xem Demo: Demo


☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML).
4- Thêm đoạn code sau vào trước thẻ </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<style>
.post-pagination { margin:20px auto; text-align:center; width:100% }
.post-pagination:before { content:'Trang:'; font-weight:Bold; border:1px solid #2196f3; color:#2196f3; border-radius:5px; margin-right:10px }
.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7,.button_8,.button_9,.button_10 { font-weight:700; background:#2196f3; border-radius:5px; display:inline-block; width:25px; color:#fff; margin-right:5px; transition:ease .69s !important }
.button_1:hover,.button_2:hover,.button_3:hover,.button_4:hover,.button_5:hover,.button_6:hover,.button_7:hover,.button_8:hover,.button_9:hover,.button_10:hover { background:none repeat scroll 0 0 #f4655f; color:#fff; text-decoration:none }

</style>
<script type="text/javascript">
//<![CDATA[
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('.content_4').fadeOut('fast');

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

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

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

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

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

jQuery('.content_10').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');

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery('.button_10').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('.content_4').fadeOut('fast');

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

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

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

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

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

jQuery('.content_10').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');

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery('.button_10').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('.content_4').fadeOut('fast');

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});

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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


return false;

});

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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});


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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});


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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});

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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});

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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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_2').css('background','#fff');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});


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

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

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

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

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

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

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

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

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

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

jQuery('.content_10').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');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

return false;

});

});
//]]>

</script>
5- Để phân trang trong bài viết, khi đăng bài bạn hãy chuyển sang chế độ soạn thảo bằng HTML để dán vào đoạn code sau:


<div class="content_1">
Bài viết trang 1
</div>
<div class="content_2" style="display: none;">
Bài Viết Trang 2
</div>
<div class="content_3" style="display: none;">
Bài viết trang 3
</div>
<div class="content_4" style="display: none;">
Bài viết trang 4
</div>
<div class="content_5" style="display: none;">
Bài viết trang 5
</div>
<div class="content_6" style="display: none;">
Bài viết trang 6
</div>
<div class="content_7" style="display: none;">
Bài viết trang 7
</div>
<div class="content_8" style="display: none;">
Bài viết trang 8
</div>
<div class="content_9" style="display: none;">
Bài viết trang 9
</div>
<div class="content_10" style="display: none;">
Bài viết trang 10
</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><a class="button_4" href="#">4</a><a class="button_5" href="#">5</a><a class="button_6" href="#">6</a><a class="button_7" href="#">7</a><a class="button_8" href="#">8</a><a class="button_9" href="#">9</a><a class="button_10" href="#">10</a>


</div>




6- Bấm Xuất bản bài đăng và xem thành quả nha.
 Lưu Ý : Ở đây mình chỉ viết js cho 10 trang thôi . Ae nào thích nhiều trang hơn thì viết thêm js nhé .
Chúc các bạn thành công .
Copy xin ghi nguồn : VuongHiep.Com

    Không có nhận xét nào:

    Đăng nhận xét