[Tips] - Kỹ thuật phân trang cho bài viết

Kỹ thuật phân trang là một kỹ thuật giúp những bài viết quá dài được chia thành 1, 2, 3 trang tùy ý để cho người đọc đỡ nhàm chán khi nhìn thấy bài viết quá dài, dành cho những blogspot viết sách, tin tức hay là tiểu thuyết dài. Thay vì hiển thị đầy đủ bài viết trên một trang, bài viết của bạn sẽ được chia làm nhiều phần, mỗi phần hiển thị trên một trang và có đánh số thứ tự trang.

Làm sao để phân trang bài viết?

1. Chỉnh sửa mẫu (templates)

Đăng nhập vào phần quản trị Blogger > Mẫu (templates) > Chỉnh sửa HTML, tìm đến thẻ đóng </body> và thêm đoạn code sau ngay trên thẻ này.

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

2. Soạn thảo bài viết

Bước tiếp theo là soạn thảo bài viết, khi đăng bài mới bạn chọn trình soạn thảo HTML và đăng bài bằng đoạn code dưới

<style type="text/css">
.kjmagicpostpage {
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 trang 1
</div>
<div class="content_2" style="display: none;">
Nội dung trang 2
</div>
<div class="content_3" style="display: none;">
Nội dung trang 3
</div>
<div class="kjmagicpostpage">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Trong đó :

• Nội dung trang 1 : là nội dung bài viết bạn muốn hiển thị ở trang 1 và tương tự với trang 2 và 3, nếu bài viết của bạn chỉ dài 2 trang hoặc muốn thêm một trang nữa thì bạn chỉ cần thêm hoặc bớt đoạn code  

<div class="content_1">
Nội dung trang 1
</div>

•  button_1 : là nút hiển thị phân trang, là số trang 1, 2, 3 bạn cũng thêm bớt như nội dung bài viết nhá.

Kết luận : Kỹ thuật phân trang bài viết các bạn nên chỉ dùng cho các blogspot có nội dung bài viết quá dài, theo bản năng nếu là bạn cũng vậy, thấy bài viết quá dài bạn thường hãy nản và không muốn đọc đúng ko. Chúc các bạn thành công.

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề