Tạo phân trang đẹp cho Blogspot phần 2

Như đã giới thiệu ở bài Tạo phân trang đẹp cho Blogspot phần 1

Dưới đây sẽ chia sẻ code tạo phân trang kiểu 2 cho blogspot.Về cơ bản các tiện ích này đều giúp khách truy cập dễ dàng trong việc điều hướng trang web/blog một tiện ích mà trang web/blog nào cũng cần có.
Để đơn giản cho việc cài đặt cũng như dỡ bỏ khi cần thiết ở đây ta chỉ cần thêm một tiện ích và dán code vào là xong.

Trong ảnh có tất cả 10 mẫu phân trang có đánh số thứ tự bên cạnh bạn thích loại nào thì lấy code tương ứng ở bên dưới

Mẫu 1

/* Phần CSS */
<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:bold}
.showpageNum a{color:#000;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#f8b5a4 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -60px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#f7cac9 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#666;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f2f0f0 url(https://lh4.googleusercontent.com/-8bahjrCLLzU/UU8DsQt00NI/AAAAAAAATyo/MiETBQ-qRQ0/s90/pagenav1.png) 0 -5px repeat-x;text-decoration:none}" 
</style>
/* Phần javascript */
<script>
var postperpage=5;//Số bài viết mỗi lần phân trang
var numshowpage=5;//Số nút phân trang
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script>
//<![CDATA[
var nopage;
var jenis;
var nomerhal;
var lblname1;
halamanblogger();
function loophalaman(banyakdata) {
    var html = '';
    nomerkiri = parseInt(numshowpage / 2);
    if (nomerkiri == numshowpage - nomerkiri) {
        numshowpage = nomerkiri * 2 + 1
    }
    mulai = nomerhal - nomerkiri;
    if (mulai < 1) mulai = 1;
    maksimal = parseInt(banyakdata / postperpage) + 1;
    if (maksimal - 1 == banyakdata / postperpage) maksimal = maksimal - 1;
    akhir = mulai + numshowpage - 1;
    if (akhir > maksimal) akhir = maksimal;
    html += "<span class='showpageOf'>Page " + nomerhal + ' of ' + maksimal + "</span>";
    var prevnomer = parseInt(nomerhal) - 1;
    if (nomerhal > 1) {
        if (nomerhal == 2) {
            if (jenis == "page") {
                html += '<span class="showpage"><a href="' + home_page + '">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">' + upPageWord + '</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            }
        }
    }
    if (mulai > 1) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
        }
    }
    if (mulai > 2) {
        html += ' ... '
    }
    for (var jj = mulai; jj <= akhir; jj++) {
        if (nomerhal == jj) {
            html += '<span class="showpagePoint">' + jj + '</span>'
        } else if (jj == 1) {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
            }
        }
    }
    if (akhir < maksimal - 1) {
        html += '...'
    }
    if (akhir < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + maksimal + ');return false">' + maksimal + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + maksimal + ');return false">' + maksimal + '</a></span>'
        }
    }
    var nextnomer = parseInt(nomerhal) + 1;
    if (nomerhal < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        }
    }   
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    for (var p = 0; p < pageArea.length; p++) {
        pageArea[p].innerHTML = html
    }
    if (pageArea && pageArea.length > 0) {
        html = ''
    }
    if (blogPager) {
        blogPager.innerHTML = html
    }
}
function hitungtotaldata(root) {
    var feed = root.feed;
    var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
    loophalaman(totaldata)
}
function halamanblogger() {
    var thisUrl = urlactivepage;
    if (thisUrl.indexOf("/search/label/") != -1) {
        if (thisUrl.indexOf("?updated-max") != -1) {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
        } else {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
        }
    }
    if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
        if (thisUrl.indexOf("/search/label/") == -1) {
            jenis = "page";
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")
        } else {
            jenis = "label";
            if (thisUrl.indexOf("&max-results=") == -1) {
                postperpage = 20
            }
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + lblname1 + '?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')
        }
    }
}
function redirectpage(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}
function redirectlabel(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + lblname1 + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}
function finddatepost(root) {
    post = root.feed.entry[0];
    var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
    var timestamp = encodeURIComponent(timestamp1);
    if (jenis == "page") {
        var alamat = "/search?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    } else {
        var alamat = "/search/label/" + lblname1 + "?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    }
    location.href = alamat
}
//]]>
</script>

Từ mẫu 2 chỉ giới thiệu phần CSS vì thay đổi kiểu mẫu là thay đổi phần CSS
Mẫu 2

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f7d5b0 url(https://lh4.googleusercontent.com/-zlDnvRF6vkc/UU8Dsbi6KUI/AAAAAAAATys/MuyxQSXFJAE/s90/pagenav2.png) 0 0 repeat-x;text-decoration:none} 
</style>

Mẫu 3

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-bottom:3px solid #fe9a2e;background:#f7f8e0}.showpageNum a:hover{border-bottom:3px solid #df01d7;background:#f6cee3}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#333;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;border-bottom:3px solid #fe9a2e;background:#f8e0f7;text-decoration:none}
</style>

Mẫu 4

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}
</style>

Mẫu 5

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(https://lh4.googleusercontent.com/-Mr9smxMcLw4/UU8F_y4J7-I/AAAAAAAATzA/1sDDrLx7JiQ/s75/wp1.jpg) 0 0 repeat-x;text-decoration:none}
</style>

Mẫu 6

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #919106;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #aeae0a;background:#ccc url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 -25px repeat-x}.showpageOf{margin:0 5px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #919106;background:#666 url(https://lh5.googleusercontent.com/-pJP_vbUPc1o/UU8F_-YKXsI/AAAAAAAATzE/znj8c9Srky8/s75/wp2.jpg) 0 0 repeat-x;text-decoration:none}
</style>

Mẫu 7

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#363636 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://lh6.googleusercontent.com/-GzA3JzM7NwU/UU8F_6RNuFI/AAAAAAAATzM/kdh6xftfRzA/s75/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>

Mẫu 8

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://lh5.googleusercontent.com/-EBKl8z_n2Gk/UU8GAAztmNI/AAAAAAAATzU/Eggqyx00ppU/s75/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>

Mẫu 9

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://lh6.googleusercontent.com/-WIJli17iGS0/UU8GAWbdvzI/AAAAAAAATzY/6kf9RnV63F4/s75/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>

Mẫu 10

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#fff;font-size:11px;margin:10px;padding:8px 20px;background:#333}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#666}.showpageNum a:hover{background:#aeb404}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#da6100;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>

Lưu ý
Để tiện ích phân trang chạy mượt mà không những tại trang chủ mà khi vào trang nhãn không bị hiện tượng liệt kê 1 dãy bài(20 bài)và có khi còn không thấy tiện ích phân trang đâu nữa.Các bạn cần làm thêm công việc sau:
Các bạn vào chỉnh sửa mẫu tìm tới những đoạn code có dạng:
expr:href='data:label.url'
Và sửa nó thành:
expr:href='data:label.url + "?&max-results=5"'
Tiếp đến bạn đặt đoạn javascript dưới đây vào ngay sau thẻ <head>

<script type='text/javascript'>

//<![CDATA[

/*---- ©:Dautoblog-----*/

if(!location.href.match('max-results=')){if(location.href.match('/search/label/')){location.href = location.href + '?&max-results=5' ;}}

//]]>

</script>

max-results=5':Số bài hiển thị mỗi lần phân trang.

Ở đây ta thống nhất mỗi lần phân trang trên mỗi trang hiển thị 5 bài và cài đặt số bài ở trang chủ cũng là 5 và số nút phân trang(numshowpage) hiển thị cũng là 5 số nút này tùy thuộc vào độ rộng của khung post bài mà bạn có thể thay đổi cho hợp lý.

Thủ thuật blogspot

Tạo phân trang đẹp cho Blogspot phần 2

Post a Comment

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Cài đặt mật khẩu cho các bài viết riêng lẻ trên blogspot/blogger mới nhất

Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

Spotlight Blogger Template Download

Tải về miễn phí mẫu blogger cao cấp Appiki - App Store không bản quyền chân trang

Thủ thuật blogspot®