Tiện ích này áp dụng vào blogspot theo cách thủ công khi viết bài nên cũng không được thuận tiện lắm.Nhưng dù sao nó vẫn hữu ích với một số blogspot viết về chủ đề truyện tranh...
Việc áp dụng tiện ích phân trang trong bài viết dùng cho blogspot có bài với nội dung dài cũng không có gì quá phức tạp,vấn đề là cần lưu tâm khi viết bài.
Phân trang trong bài viết kiểu 1
DEMO
Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa HTML
Bước 1: Thêm đoạn css sau vào trước thẻ ]]></b:skin>
#spaging-container, #snumber-container {
width: 100%;
}
.spage183 {
display:none;
}
.sitem183 {
padding: 3px;
}
.sitem183 a, .sitem183 a.visited {
font-weight: bold;
text-decoration: none;
color: green;
}
.sitem183 a:hover, .sitem183 a.current183 {
text-decoration: underline;
color: blue;
}Bước 2: Chèn đọan code sau vào trước dòng code </head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
CreateItems();
$(".spage183:first").css("display", "block");
$(".sitem183:first a").addClass("current183");
$(".snumber-container a").click(function () {
var showPage = $(this).attr("href");
showPage = parseInt(showPage) - 1;
$(".spage183").hide();
$(".sitem183 a").removeClass("current183");
$("#spaging-container > div.spage183:eq(" + showPage + ")").fadeIn();
$(this).addClass("current183");
return false
})
});
function CreateItems() {
var a = document.getElementById('spaging-container');
nd = a.innerHTML.replace(/\$pageIn/gi, '<div class="spage183">');
nd = nd.replace(/\$pageOut/gi, '</div><div class="clear"></div>');
a.innerHTML = nd
}
function NumberedPage(num, name, sep) {
document.write('<div class="snumber-container" id="snumber-container"></div>');
var i = 1;
var txt = "";
while (i <= num) {
if (num - i != 0) {
txt += "<span class='sitem183'><a href=\"" + i + "\">" + name + " " + i + "</a></span> " + sep + " "
} else {
txt += "<span class='sitem183'><a href=\"" + i + "\">" + name + " " + i + "</a></span> "
}
i++
}
$("#snumber-container").html(txt)
}
//]]> </script>Nếu blog có thư viện jquery rồi thì bỏ đi đoạn màu vàng.Lưu mẫu
Bước 3:
Khi viết bài ta sử dụng code sau ở bên soạn thảo HTML
<div id="spaging-container">
$pageIn
Nội dung trang 1
$pageOut
$pageIn
Nội dung trang 2
$pageOut
$pageIn
Nội dung trang 3
$pageOut
$pageIn
Nội dung trang 4
$pageOut
$pageIn
Nội dung trang 5
$pageOut
$pageIn
Nội dung trang 6
$pageOut
</div>Trong đó: Thay nội dung trang 1,2,3,4,5,6 thành đoạn văn bản.
Để thêm 1 trang trong bài viết bạn chỉ cần thêm đoạn code bên dưới vào trước thẻ đóng </div>
$pageIn
Nội dung trang n
$pageOutBước 4:Thêm javascript sau vào cuối bài viết
<script type="text/javascript">
NumberedPage(
numPage = 6, // Số trang
title = "Trang",
separator = "|"
);
</script>Lưu ý
Số trang bạn muốn phân tương ứng với numPage =n (dòng màu hồng).
Đối với blog không nhất thiết bài nào cũng dùng phân trang thì bạn có thể gộp tất cả css, javascript, file jquery và HTML vào trong phần soạn thảo HTML của bài viết cho tiện. Vì nhiều blog không cần dùng jquery.
Phân trang trong bài viết kiểu 2
DEMO
THỰC HIỆN
Với blog không dùng thư viện jquery, và không phải bài viết nào cũng cần phân trang thì ta sử dụng toàn bộ code ngay trong bài viết cho tiện.
Code này chia bài viết thành 3 phần(3 trang) nếu muốn hơn 3 trang thì phải viết lại code.
Trong bài viết bạn sử dụng code sau(bên 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 src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
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 bài viết trang 1
</div>
<div class="content_2" style="display: none;">
Nội dung bài viết trang 2
</div>
<div class="content_3" style="display: none;">
Nội dung 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>Trong đó:
Bài viết trang 1, 2 và 3 là các phần bài viết bạn muốn phân chia(bài viết chia làm 3 phần nhỏ)