Phân chia trang trong chính nội dung của bài viết Blogger

Loading...

Nhiều bạn đọc có chia sẻ về một cách phân nội dung trong bài viết mà đã nhìn thấy ở trên nền Website Wordpress, vậy Blogger có làm được như thế không? Chi tiết về lợi ích của thủ thuật này bạn sẽ thấy được ở link demo bên dưới.
Để tạo ra một sự phân chia tách hẳn nội dung trong bài viết thì sử dụng phương pháp này là rất hữu ích. Ngoài ra khi bạn viết một nội dung quá dài, thì việc sử dụng thủ thuật này cũng đem lại những lợi ích thích thú cho người đọc. Ít phải kéo xuống hơn, những nội dung ở trang được phân sẽ load ngầm không gây cảm giác khó chịu cho người xem.

XEM DEMO

Khi bạn đã xem xong Demo. Nếu bạn cần sử dụng thủ thuật này áp dụng cho 1 hoặc nhiều bài viết trong blog hoặc Website của bạn thì bạn có thể làm theo hướng dẫn dưới đây.
Thêm mã dưới đây vào trình soạn thảo HTML

<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">
NỘI DUNG GHI VÀO ĐÂY
</div>
<div class="content_2" style="display: none;">
NỘI DUNG GHI VÀO ĐÂY
</div>
<div class="content_3" style="display: none;">
NỘI DUNG GHI VÀO ĐÂY
</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>

Bạn thay NỘI DUNG GHI VÀO ĐÂY bằng nội dung lần lượt các trang 1,2,3 của mình.
Có một số điểm quan trọng cần lưu ý để tạo ra sự tách biệt này:
1. Bạn hãy chắc chắn rằng đã có Jquery trong blog của bạn. Nếu chưa có thì bạn thêm đoạn mã dưới đây
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
2. Khi soạn thảo nội dung bài viết, bạn chọn chế độ soạn là mã code HTML
3. Bạn có thể chỉnh sửa các màu mã, kích thước,vv.

---

Quan trọng hơn, nếu bạn gặp bất kỳ rắc rối nào trong quá trình thực hiện thủ thuật. Hãy để lại nội dung bình luận, chúng tôi sẽ hỗ trợ bạn trong thời gian ngắn nhất.

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger