Tiện ích này có thể đặt liên kết tới trang chứa phân trang ở sidebar hoặc trong menu.... để khách truy cập blog có thể lựa chọn.Phân trang loại này có thể dùng cho toàn blogspot hoặc cho từng nhãn riêng biệt.
DEMO
Để tạo phân trang kiểu này ta cần tiến hành các bước như sau:
Bước 1.
Bạn vào phần thiết kế sau đó chọn tiếp tab Trang và tiến hành thêm 1 trang mới
Bên soạn thảo văn bản HTML bạn dán đoạn code dưới đây vào.
<style type='text/css'>
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:#666;
text-align:left;
margin:0px auto;
padding:15px;
background-color:white;
}
#loadingscript {
background:#F6EFBB url('http://reader-download.googlecode.com/files/ajax-loader.gif') no-repeat 50% 46%;
padding:10px;
font:bold 20px Georgia,Serif;
color:black;
height:400px;
text-indent:-9999px;
-webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
-moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}
.itemposts {
margin:0px auto 5px;
height:auto;
background-color:white;
overflow:hidden;
display:block;
}
.itemposts h6 {
margin:0px auto 2px;
font:bold 12px/14px Arial,Sans-Serif;
background-color:#899bc1;
padding:10px 15px;
text-transform:none;
color:white;
}
.itemposts h6 a {
color:white;
text-decoration:none;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}
.itemposts img {
float:left;
height:72px;
width:72px;
margin:2px 10px 2px 0px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:#fafafa;
border:1px solid #dcdcdc;
padding:4px;
}
.itemposts .iteminside {
padding:10px;
background-color:#f2f2f2;
background-image:-webkit-linear-gradient(top, #f2f2f2, white);
background-image:-moz-linear-gradient(top, #f2f2f2, white);
background-image:-ms-linear-gradient(top, #f2f2f2, white);
background-image:-o-linear-gradient(top, #f2f2f2, white);
background-image:linear-gradient(top, #f2f2f2, white);
border-top:1px solid #e5e5e5;
-webkit-box-shadow:inset 0px 1px 0px white;
-moz-box-shadow:inset 0px 1px 0px white;
box-shadow:inset 0px 1px 0px white;
}
.itemposts .itemfoot {
clear:both;
border:0px solid #EAE7DB;
padding:5px 10px;
margin:10px 0px 0px;
background-color:#fafafa;
color:#4B86C1;
overflow:hidden;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#895F30;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
color:#9BB009;
text-decoration:underline;
}
#itempager {
background-color:#F2F0F1;
padding:30px 0px;
border-top:1px solid #E5E5E5;
-webkit-box-shadow:inset 0px 1px 0px white;
-moz-box-shadow:inset 0px 1px 0px white;
box-shadow:inset 0px 1px 0px white;
}
#pagination, #totalposts {
color:#999;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
margin-bottom:10px;
text-align:center;
}
#pagination span, #pagination a {
border:1px solid #e5e5e5;
color:white;
display:inline;
margin:0 1px;
padding:2px 5px;
text-indent:0px;
background-color:#8899D0;
text-decoration:none;
}
#pagination span.actual,
#pagination a:hover {
background-color:#7483BC;
}
#pagination span.hidden {
display:none;
}
</style>
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,//Theo nhãn thì để chế độ: true
labelSorter = "Blogspot-Seo",//Theo nhãn thì thay tên nhãn
loadingText = "Loading...",
totalPostLabel = "Tổng số bài viết:",
jumpPageLabel = "Trang",
commentsLabel = "Comment",
rmoreText = "Đọc tiếp ►",
prevText = "Prew",
nextText = "Next",
siteUrl = "http://dautoblognz.blogspot.com",//URL Blog của bạn
postsperpage = 10,//Số bài trong 1 trang
numchars = 370,
imgBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";//Ảnh đại diện khi bài không có ảnh
</script>
<script type='text/javascript'>
//<![CDATA[
var minpage = 6; // Minimum number to display the page
var maxpage = 10; // The maximum number of pages to display
var firstpage = 0; // Detect the first time it is executed
var pagernum = 0; // Contain the page number where we
var postsnum = 0; // Start the first page
var actualpage = 1; // Starting value of the current page (it will change if you click the pagination).
// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:0;right:0;font:normal bold 1px Arial,Sans-Serif!important;color:#fff;text-decoration:none;" href="https://dautoblognz.blogspot.com/2013/02/tao-trang-rieng-chua-tien-ich-phan.html" target="_blank">►.</a></div></div>');
var _results = document.getElementById('results');
var _pagination = document.getElementById('pagination');
var _totalposts = document.getElementById('totalposts');
// Build the table of contents framework
function showPagePosts(json) {
var entry, posttitle, posturl, postimg, postsumm, replies, monthnames, timepub, output = "";
if (pagernum == 0) {
postsnum = parseInt(json.feed.openSearch$totalResults.$t);
pagernum = parseInt(postsnum / postsperpage) + 1;
}
for (var i = 0; i < postsperpage; i++) {
if (i == json.feed.entry.length) break;
entry = json.feed.entry[i];
posttitle = entry.title.$t; // Get the post title
// Get rel="alternate" for truly post url
for (var k = 0, elen = entry.link.length; k < elen; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href; // This is your real post URL!
break;
}
}
// Get the comments count
for (var l = 0, clen = entry.link.length; l < clen; l++) {
if (entry.link[l].rel == "replies" && entry.link[l].type == "text/html") {
var commentsnum = entry.link[l].title.split(" ")[0]; // This is your comments count
break;
}
}
// If the Blogger-feed is set to SHORT, then the content is in the summary-field
postsumm = ("summary" in entry) ? entry.summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "") : ""; // Get the post summary
// Reduce post summaries to "numchars" characters.
// "numchars" is a variable. You determine the value
if (postsumm.length > numchars) {
postsumm = (numchars > 0 && numchars !== false) ? postsumm.substring(0, numchars) + '...' : "";
}
// Get the post date (e.g: 2012-02-07T12:56:00.000+07:00)
var _postdate = entry.published.$t,
_cdyear = _postdate.substring(0, 4), // Take 4 characters from the "postdate" beginning, it means the year (2012)
_cdmonth = _postdate.substring(5, 7), // Take 2 character 5 step from "postdate" beginning, it mean the month (02)
_cdday = _postdate.substring(8, 10); // Take 2 character 8 step from "postdate" beginning. it means the day (07)
// Month array template
monthnames = (idMode) ? ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// The final product of the post date = (07 Feb 2012) (cdday monthnames cdyear)
timepub = (showPostDate) ? _cdday + ' ' + monthnames[parseInt(_cdmonth, 10) - 1] + ' ' + _cdyear + ' - ' : '';
// The final product of the comments count & comments label (10 Komentar) (commentsnum commentsLabel)
replies = (showComments) ? commentsnum + ' ' + commentsLabel : '';
// Get the post thumbnails
postimg = ("media$thumbnail" in entry) ? entry.media$thumbnail.url : imgBlank;
// Build the post template
output += '<div class="itemposts">';
output += '<h6><a href="' + posturl + '" target="_blank">' + posttitle + '</a></h6>';
output += '<div class="iteminside"><a href="' + posturl + '" target="_blank"><img src="' + postimg + '" /></a>';
output += '<span class="summary">' + postsumm + '</span></div>';
output += '<div style="clear:both;"></div><div class="itemfoot">' + timepub + replies + '<a class="itemrmore" href="' + posturl + '" target="_blank">' + rmoreText + '</a></div>';
output += '</div>';
}
// Put the whole template above into <div id="results"></div>
_results.innerHTML = output;
_create_pagination();
}
// Build the pagination
function _create_pagination() {
output = "";
var starter = 0;
output += (actualpage > 1) ? '<a title="' + prevText + '" class="prevjson" href="javascript:_init_script(' + parseInt(actualpage - 1) + ')">' + prevText + '</a>' : '<span class="prevjson hidden">' + prevText + '</span>';
if (pagernum < (maxpage + 1)) {
for (starter = 1; starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '<a href="javascript:_init_script(' + starter + ')">' + starter + '</a>';
}
} else if (pagernum > (maxpage - 1)) {
if (actualpage < minpage) {
for (starter = 1; starter < (maxpage - 2); starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '<a href="javascript:_init_script(' + starter + ')">' + starter + '</a>';
}
output += ' ... ';
output += '<a href="javascript:_init_script(' + parseInt(pagernum - 1) + ')">' + parseInt(pagernum - 1) + '</a>';
output += '<a href="javascript:_init_script(' + pagernum + ')">' + pagernum + '</a>';
} else if (pagernum - (minpage - 1) > actualpage && actualpage > (minpage - 1)) {
output += '<a href="javascript:_init_script(1)">1</a>';
output += '<a href="javascript:_init_script(2)">2</a>';
output += ' ... ';
for (starter = actualpage - 2; starter <= actualpage + 2; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '<a href="javascript:_init_script(' + starter + ')">' + starter + '</a>';
}
output += ' ... ';
output += '<a href="javascript:_init_script(' + parseInt(pagernum - 1) + ')">' + parseInt(pagernum - 1) + '</a>';
output += '<a href="javascript:_init_script(' + pagernum + ')">' + pagernum + '</a>';
} else {
output += '<a href="javascript:_init_script(1)">1</a>';
output += '<a href="javascript:_init_script(2)">2</a>';
output += ' ... ';
for (starter = pagernum - (minpage + 1); starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '<a href="javascript:_init_script(' + starter + ')">' + starter + '</a>';
}
}
}
output += (actualpage < starter - 1) ? '<a title="' + nextText + '" class="nextjson" href="javascript:_init_script(' + parseInt(actualpage + 1) + ')">' + nextText + '</a>' : '<span class="nextjson hidden">' + nextText + '</span>';
_pagination.innerHTML = output;
var parameter = (actualpage * postsperpage) - (postsperpage - 1),
_final = actualpage * postsperpage;
_totalposts.innerHTML = totalPostLabel + ' ' + postsnum + ' - ' + jumpPageLabel + ' ' + parameter + ' - ' + _final;
}
// Functions to remove and append the callback script that has been manipulated in the `start-index` parameter
function _init_script(n) {
var parameter = (n * postsperpage) - (postsperpage - 1);
var url = (sortByLabel) ? siteUrl + '/feeds/posts/summary/-/' + labelSorter + '?start-index=' + parameter : siteUrl + '/feeds/posts/summary/?start-index=' + parameter; // Optional: Sort posts by a specific label
if (firstpage == 1) {
var old = document.getElementById("TEMPORAL");
old.parentNode.removeChild(old);
}
_results.innerHTML = '<div id="loadingscript">' + loadingText + '</div>';
_pagination.innerHTML = '';
_totalposts.innerHTML = '';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url + '&max-results=' + postsperpage + '&orderby=published&alt=json-in-script&callback=showPagePosts';
script.id = 'TEMPORAL';
document.getElementsByTagName('head')[0].appendChild(script);
firstpage = 1;
actualpage = n;
}
// Execute the _init_script() function with parameter as `1` on page load
// So it will show the first page.
window.onload = function () {
_init_script(1);
};
//]]>
</script>Trong code bạn thayhttp://dautoblognz.blogspot.com thành URL blog của bạn.
Nếu theo nhãn thì làm thêm 2 việc là đổi flase thành true và ghi tên nhãn vào như đã chú thích trong code.
Bước 2
Nhấn Xuất bản và xem thành quả.
