Home
Thủ thuật blogspot
Tiện ích

Tạo trang riêng chứa tiện ích phân trang cho Blogspot

Đây là một dạng phân trang khác hẳn với loại phân trang truyền thống.Kiểu phân trang này là tạo ra một trang mới chứa tiện ích phân trang trong nó.

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.

Tạo trang riêng chứa tiện ích phân trang cho Blogspot

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

Tạo trang riêng chứa tiện ích phân trang cho Blogspot

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 &#9658;",
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">&#9658;.</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 thay
http://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ả.
Publis: 

6 comments

  1. Mình đang cần làm trang như thế này cho blog của mình, rất may gặp được bài hướng dẫn của bạn. Mày mò chỉnh sửa xem thế nào mới dc!
    1. Bạn thấy cái nào dùng được thì lấy dùng có gì chưa rõ thì cứ comment mình sẽ trả lời với những gì mình biết.
      Cái phân trang này bạn có thể tùy biến css để có được giao diện vừa ý(cứ nghịch ở 1 blog test bao giờ dc thì code vào blog chính)
  2. Nếu muốn nó được trình bày, bố cục giống hệt link label hiện giờ của blog thì css, và script có sẵn trong mẫu rồi phải không bạn, mình chỉ chỉnh một chút nữa phải k nhỉ
    1. Bạn chỉnh sửa hoặc thêm css trong code
    2. Bạn code hộ mình để tạo một trang static cho label Dự án BĐS có bố cục giống hệt như vào link label đó với. Mình loay hoay mãi mà nó k ra cái gì đc!
      blog của mình: nhavuong.net
    3. Cũng chỉ sửa dc 1 vài thứ như font,cỡ chữ và nền tiêu đề... thôi còn ảnh ko thay đổi dc vì to hơn sẽ nhòe.
      Bỏ khung bao(box-shadow) đi cũng được.
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji