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

Phân trang thì có rất nhiều kiểu loại mẫu mã.Nhiều cách bố trí cài đặt ví dụ như áp dụng theo cách chỉnh sửa HTML trong template hay là thêm một tiện ích.

Để đơ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.
Làm thế nào để áp dụng vào Blog
Để tạo phân trang đẹp cho blogspot các bạn tiến hành theo các bước dưới đây:
1- Đăng nhập Blog
2- Chọn thêm tiện ích
3- Chọn 1 trong các mẫu dưới đây cùng với code tương ứng
4- Dán code vô khung tiện ích và click lưu lại
Chú ý nên để tiện ích này ngay dưới khung chỉnh sửa bài viết trong phần bố cục

Vì javascript là chung cho các mẫu nên js để riêng khi dùng lấy css từ các mẫu kết hợp với js tại đây

/* 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>

Mẫu 1

<style type="text/css">#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://lh4.googleusercontent.com/-1wuhDWcQiDk/UU8dhj9cRgI/AAAAAAAAT0k/_7g6VhAI3Ns/s26/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://lh3.googleusercontent.com/-SPOGNwpFqmE/UU8dhpKjpzI/AAAAAAAAT0o/Ka7AM9Syc-s/s26/nava2.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;} </style>

Mẫu 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#222;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -30px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#111;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#222;}.showpagePoint {background:transparent url(https://lh6.googleusercontent.com/-0-K8UEysjqY/UU8elJT1cvI/AAAAAAAAT00/Bw9cEkYUtQE/s90/lite.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #111;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#777;text-decoration:underline;font-weight:bold; 
</style>

Mẫu 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#eee;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -15px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#eee;}.showpagePoint {background:transparent url(https://lh3.googleusercontent.com/-eApJXTWgfcs/UU8fa1e7evI/AAAAAAAAT1A/A-xOm1QTY-Y/s197/transpdark.png) repeat-x;background-position:0px -15px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #aaa;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#eee;text-decoration:underline;font-weight:bold; 
</style>

Mẫu 4

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a { 
background:transparent url(https://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/darkblue.png) repeat-x; 
border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap; 
}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/darkblue.png) repeat-x; 
border:2px solid #5C8CFB;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none; 
}.showpageOf{ 
margin:0 8px 0 0; 
background:transparent url(https://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
line-height:30px;padding:3px 10px;color:#FFF; 
}.showpagePoint { 
background:transparent url(https://lh5.googleusercontent.com/-s_Mxp9RboDo/UU8f9KoqoJI/AAAAAAAAT1M/CqbETZf4_54/s32/darkblue.png) repeat-x; 
margin:0 3px 0 3px;padding:3px 10px; 
line-height:30px;cursor:pointer;white-space:nowrap; 
border:2px solid #5C8CFF;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold; 
} </style>

Mẫu 5

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/yellow-butt.png) repeat-x;background-position:-10px -43px; 
border:1px solid #FB5106;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://lh3.googleusercontent.com/-rU1ms5jJtFc/UU8gb3CTPfI/AAAAAAAAT1Y/WrkybfOOOz0/s90/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>

Mẫu 6

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/greendiamond.png) repeat-x;background-position:0px -30px; 
border:2px solid #006666;-webkit-border-radius:20px; 
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://lh4.googleusercontent.com/-yR24QnSMBfA/UU8g-IHPemI/AAAAAAAAT1k/j6DBC4J9-KA/s146/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>

Mẫu 7

<style type="text/css">#blog-pager{height: 28px; 
padding: 10px 0 0; 
overflow:hidden; 
text-align:center; 
}.showpageArea a {text-decoration:underline; 
font-size: 16px; 
text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;} 
</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' :Là số bài hiển thị mỗi lần phân trang.
Chúc thành công! Xem thêm: Tạo phân trang phần 2

Thủ thuật blogspot

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

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

Code meta seo onpage đầy đủ gọn nhẹ mới nhất

Thủ thuật blogspot®