Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây Bloggerism xin giới thiệu một kiểu phân trang cũng khá đẹp.
Xem Demo.
Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.
.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}
Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.
<script type='text/javascript'>var home_page="/";
urlactivepage=location.href;postperpage=7;
numshowpage=5;
upPageWord='Prev';
downPageWord='Next';
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var first;var lblname1;PageNavi();function loophalaman(a){var e="";nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=first-nomerkiri;if(mulai<1){mulai=1}last=parseInt(a/postperpage)+1;if(last-1==a/postperpage){last=last-1}akhir=mulai+numshowpage-1;if(akhir>last){akhir=last}e+="<span class='showpageOf'>Page "+first+"/"+last+"</span>";var g=parseInt(first)-1;if(first>1){if(first==2){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>"}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectpage('+g+');return false">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectlabel('+g+');return false">'+upPageWord+"</a></span>"}}}if(mulai>1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}if(mulai>2){e+="..."}for(var f=mulai;f<=akhir;f++){if(first==f){e+='<span class="showpagePoint">'+f+"</span>"}else{if(f==1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectpage('+f+');return false">'+f+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectlabel('+f+');return false">'+f+"</a></span>"}}}}if(akhir<last-1){e+="..."}if(akhir<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectpage('+last+');return false">'+last+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectlabel('+last+');return false">'+last+"</a></span>"}}var c=parseInt(first)+1;if(first<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectpage('+c+');return false">'+downPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectlabel('+c+');return false">'+downPageWord+"</a></span>"}}e+="<div></div>";var d=document.getElementsByName("pageArea");var b=document.getElementById("blog-pager");for(var h=0;h<d.length;h++){d[h].innerHTML=e}if(d&&d.length>0){e=""}if(b){b.innerHTML=e}}function firstpost(a){var c=a.feed;var b=parseInt(c.openSearch$totalResults.$t,10);loophalaman(b)}function PageNavi(){var a=urlactivepage;if(a.indexOf("/search/label/")!=-1){if(a.indexOf("?updated-max")!=-1){lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max"))}else{lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))}}if(a.indexOf("?q=")==-1&&a.indexOf(".html")==-1){if(a.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=firstpost"><\/script>')}else{jenis="label";if(a.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=firstpost&max-results=1" ><\/script>')}}}function redirectpage(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function redirectlabel(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function finddatepost(b){post=b.feed.entry[0];var a=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var d=encodeURIComponent(a);if(jenis=="page"){var c="/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}else{var c="/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}location.href=c};
//]]>
</script>
urlactivepage=location.href;postperpage=7;
numshowpage=5;
upPageWord='Prev';
downPageWord='Next';
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var first;var lblname1;PageNavi();function loophalaman(a){var e="";nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=first-nomerkiri;if(mulai<1){mulai=1}last=parseInt(a/postperpage)+1;if(last-1==a/postperpage){last=last-1}akhir=mulai+numshowpage-1;if(akhir>last){akhir=last}e+="<span class='showpageOf'>Page "+first+"/"+last+"</span>";var g=parseInt(first)-1;if(first>1){if(first==2){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>"}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectpage('+g+');return false">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectlabel('+g+');return false">'+upPageWord+"</a></span>"}}}if(mulai>1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}if(mulai>2){e+="..."}for(var f=mulai;f<=akhir;f++){if(first==f){e+='<span class="showpagePoint">'+f+"</span>"}else{if(f==1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectpage('+f+');return false">'+f+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectlabel('+f+');return false">'+f+"</a></span>"}}}}if(akhir<last-1){e+="..."}if(akhir<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectpage('+last+');return false">'+last+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectlabel('+last+');return false">'+last+"</a></span>"}}var c=parseInt(first)+1;if(first<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectpage('+c+');return false">'+downPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectlabel('+c+');return false">'+downPageWord+"</a></span>"}}e+="<div></div>";var d=document.getElementsByName("pageArea");var b=document.getElementById("blog-pager");for(var h=0;h<d.length;h++){d[h].innerHTML=e}if(d&&d.length>0){e=""}if(b){b.innerHTML=e}}function firstpost(a){var c=a.feed;var b=parseInt(c.openSearch$totalResults.$t,10);loophalaman(b)}function PageNavi(){var a=urlactivepage;if(a.indexOf("/search/label/")!=-1){if(a.indexOf("?updated-max")!=-1){lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max"))}else{lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))}}if(a.indexOf("?q=")==-1&&a.indexOf(".html")==-1){if(a.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=firstpost"><\/script>')}else{jenis="label";if(a.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=firstpost&max-results=1" ><\/script>')}}}function redirectpage(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function redirectlabel(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function finddatepost(b){post=b.feed.entry[0];var a=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var d=encodeURIComponent(a);if(jenis=="page"){var c="/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}else{var c="/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}location.href=c};
//]]>
</script>
Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham số postperpage=7.
Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'
Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=7"'
Lưu Template là OK.
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D