Làm thanh công cụ phân trang (PageNavi) cho bài viết

Trong blogger không có phân trang tự động nên ta phải tự tạo cho mình thanh công cụ này (PageNavi)
Để làm thanh công cụ phân trang bằng số (PageNavi) cho Blogspot/Blogger,
bạn cần thực hiện qua 3 bước: thêm mã CSS, thêm mã JavaScript xử lý phân trang và chèn mã hiển thị vào giao diện.

🔖 Cách Làm thanh công cụ phân trang

Đăng nhập Blogger Dashboard \ Design \ Edit HTML \Proceed\ Expand Widget Templates.
Trong bài viết yêu cầu làm theo 3 bước, đặt 3 đoạn code sau đây vào theme của bạn tuần tự

📍 BƯỚC 1

Tìm code sau và thay vào:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<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='Pages '+e+' of '+a+" ";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+=''+i+""}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>

📍 BƯỚC 2

Tiếp tục tìm một trong các code sau:
<b:include name='nextprev'/>
Thay vào chính nó code sau

📍 BƯỚC 3

Tìm dòng code sau : ]]></b:skin>
Thay vào trước nó code sau:

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

🔖 Cách tự làm JavaScript phân trang

Tìm thẻ đóng </body> trong file HTML và dán đoạn mã Script phân trang (thường sử dụng script PageNavi viết lại cho Blogspot) ngay phía trước nó:

👉 Những Code học thêm khi làm blogger

Tên Code	Mã Nguồn
Thông báo	<div class="alert"> Thông báo </div>
Thành công	<div class="success"> Hoàn thành </div>
Cảnh báo	<div class="warning"> Chú ý </div>
Khung ghi chú	<div class="note"> Ghi chú </div>
Trích dẫn	<blockquote> Nội dung trích dẫn </blockquote>