Chia bài viết ra thành nhiều trang cho Blogger

Bạn là một blogger thiên về mản tiểu thuyết ...Cần viết một bài viết siêu dài mà băn khoăn không biết làm sao. Thì nay Hồng Designer đã có giải pháp cho bạn là chia bài viết của bạn ra thành nhiều trang không để bài viết qua dài khiến người xem ngán ngẩm.

Nếu bạn thích thì chúng ta bắt đầu làm nhé :

Bước 1 :

Thêm code sau trên thẻ </head> trong template blog của bạn.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Bước 2 :

Tạo một bài đăng mới và chuyển sang trình soạn thảo HTML dán đoạn code sau.

<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">
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="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Trên đây là code chia bài viết ra thành 3 trang nếu các bạn muốn nhiều hơn 3 trang thì hãy thêm đoạn code sau :

<div class="content_4" style="display: none;">
Bài viết trang 4
</div>

Chúc các bạn thành công.

Share :

Tweet

More

Related Post