Cách phân trang cho blog và một số style

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Những chữ tô xanh không cần phải giống nhau với các template.

<b:includable id='page-navi'> <!-- Tiện ích phân trang PageNavi (1)-->
    <div class="pagenavi">
        <script type="text/javascript">
        var pageNaviConf = {
            perPage: 8, // Số bài viết hiển thị trên một trang
            numPages: 7, // Số trang hiển thị
            firstText: "First",
            lastText: "Last",
            nextText: "Next",
            prevText: "Prev"
        }
        </script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
<div class="clear" />
</div>
</b:includable>

if(e<=1){return} // Bỏ dòng này đi, nếu muốn các bài đăng trong 1 label nào đó ít hơn "perPage" mà vẫn hiển thị được phân trang. (Nó có dạng "Pages 1 of 1" - để người đọc biết được rằng số bài đăng trong label này chỉ có thế)

<!-- Tiện ích phân trang PageNavi (2)-->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
</b:if>

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
     padding:3px;
     margin-right:5px;
     background:#fff;
     border:1px solid #c20c0c;
}

/*Màu link đã xem qua*/
.pagenavi a:visited{ 
     color:#c20c0c;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
     background:#c20c0c;
     color:#fff;
     text-decoration:none;
}
.pagenavi .pages,.pagenavi .current{
     font-weight:bold;
}
.pagenavi .pages{border:none}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a { 
     font-size:12px;
     padding: 2px 4px 2px 4px;
     margin: 2px;
     border: 1px solid #dfdfdf;
     color:#000;
}
.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
      color:#FFF;
      background-color:#e81d1d;
      border: 1px solid #fb1515;
      text-decoration:none;
}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a {
     background:#0e0f10;
     font-size:12px;
     padding: 3px 5px;
     margin: 2px;
     border: 1px solid #333;
     color:#fff;
}

.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
     color: #FFF;
     background-color: #33393f;
     border: 1px solid #444;
     text-decoration:none;
}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    clear:both;
    margin:10px auto 20px;
    text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    background:#24bde2;
    border:1px solid #4adcff;
    padding:3px 8px;
    color:#fff;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    color:#fff;
    background:#ff6734;
    border:1px solid #ddd;
    text-decoration:none;
}
.pagenavi .pages{display:none}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    background:#f1f1f1;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #bfbfbf;
    padding:3px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    border:1px solid #f1f1f1;
    padding:1px 4px;
    color:#000;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    border:1px solid #bfbfbf;
    background:#fffdf0;
    color:#000;
    text-decoration:none;
}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    background:#3498b9;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #2f7a93;
    padding:4px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    font-weight:bold;
    padding:7px 8px;
    color:#fff;
    margin:1px;
    font-size:11px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    background:#236e8f;
    color:#fff;
    text-decoration:none;
}

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    clear:both;
    text-align:right;
    margin:25px 0 10px 0;
    font-size:.714em;
    font-weight:600;
    line-height:1.4em;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    background:#e1e1e1;
    color:#555;
    border:1px solid #555;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0 1px 0 #FFF;
    -webkit-box-shadow:0 1px 0 #FFF;
    box-shadow:0 1px 0 #FFF;
    margin-left:5px;
    padding:4px 6px 3px;
    text-shadow:0 1px 0 #C2C2C2;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    background:#29A07C;
    border:1px solid #00203B;
    text-shadow:0 -1px 0 #00203B;
    color:#fff;
    text-decoration:none;
}

.pagenavi .pages{background:none;border:none}