Nếu bạn nào muốn biến blogspot thành trang đọc truyện chắc hẳn sẽ gặp phải vấn đề đối với những truyện quá dài. Có 1 giải pháp thường thấy đó là chia bài viết thành nhiều trang. Nhưng bạn không biết phải làm như thế nào. Thì nay, trong khi mình đang thực hiện 1 blog đọc truyện nên đã tìm ra được cách để giải quyết vấn đề trên.
Còn bạn nào thích có thể xem các bài viết hướng dẫn biến blogspot thành web,wap truyện tại đây nhé.
Cách chia bài viết thành nhiều trang
Bước 1: Thêm đọc code sau vào trong cặp thẻ <HEAD>...</HEAD> trong template của bạn:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Bước 2: Tạo 1 bài đăng mới và chuyển sang trình soạn thảo bằng HTML và 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>
Đây là code chia bài viết thành 3 phần, nếu bạn muốn chia thêm 4 trang hoặc nhiều hơn thì chỉ cần thêm đoạn code với dạng
<div class="content_4" style="display: none;">
Bài viết trang 4
</div>
Thay 4 là số trang bạn muốn chia
Và thêm đoạn sau để tạo thêm nút:
<a class="button_4" href="#">4</a>
Đây là cách mình đã áp dụng để chia bài viết thành nhiều trang cho 1 blogspot dùng làm web đọc truyện. Nếu trong quá trình thực hiện có vấn đề gì các bạn cứ để lại lời nhắn nhé, mình sẽ cố gắng giúp đỡ. Chúc các bạn thành công.
