...Đôi lúc có những bài viết quá dài, tác giả muốn ngắt bớt thành nhiều phần nhỏ hơn để tăng sức lôi cuốn và tính hấp dẫn cho nội dung. Hoặc nhiều bạn chí sẽ nhiều bài văn, câu chuyện dài muốn ngất bớt để làm tăng thêm sự tò mò muôn khám phá cho độc giả của mình. Điều này sẽ thực hiện được khá dễ dàng với trang wordpress nhờ có công cụ thích hợp
Thủ thuật sau đây sẽ giúp bạn thực hiên điều này một cách khá suôn sẽ với mấy bước đơn giản sau.
 |
| Một bài viết chía sẽ hình ảnh cũng có thể chí được thành n hiều phần nhỏ hơn |
Bưới 1: Thêm đoạn code bên dưới vào trong cặp thẻ <head> ....</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Bước 2: Tạo bài đăng mới và chuyển sang trình soạn thảo html và dán đoạn code bên dứoi vào nhé:
<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>
Vậy trong trường hợp các bạn muốn chia nhiều hơn 3 phần thì phải làm thế nào? Rất đơn giản là bạn chỉ cần chèn thêm đoạn code sau
<div class="content_4" style="display: none;">
Bài Viết Trang 4
</div>
Và thêm đoạn code cuối để làm nút nhấn n hé
<a class="button_4" href="#">4</a>
Chúc các bạn thực hiện thành công nhé