Để 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.
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. Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger
0 nhận xét:
Đăng một bình luận