Tiện ích phân trang PageNavi và một số style

Giới thiệu: Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 

Bước 1: Tìm dòng code có dạng tương tự sau:

<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.

- Thêm vào sau nó đoạn code sau:

<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ế)

Bước 2: Tìm dòng <b:include name='nextprev'/>

- Thay thế nó bằng đoạn code sau:

<!-- 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>

Bước 3: Tìm dòng code ]]></b:skin>

- Thêm vào trước nó một trong 7 mẫu code sau:

Mẫu 1:

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

Mẫu 2:

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

Mẫu 3:

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

Mẫu 4:

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

Mẫu 5:

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

Mẫu 6:

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

Mẫu 7:

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

Bước 4: Save template. (Lưu mẫu)

THE END.