Phân trang (Page Navigation) có nhiều phiên bản. Trong quá trình thiết kế bloger để có thể chọn được kiểu phân trang đáp ứng được các yêu cầu như: tải nhanh, đẹp mắt, độc đáo, mới lạ, hoạt động tốt với các blog vượt dung lượng lưu trữ của feed (blog có trên 3000 bài viết),...



Page Navigation - Thủ thuật phân trang cuộn cho Blogger
  • Giao diện đẹp, dễ tùy biến.
  • Hiển thị tốt với các blog có trên 500 bài viết (thâm trí cả blog trên 3000 bài viết).
  • Tốn ít thời gian để tính toán tất cả các bài viết hiện có => Giúp tăng tốc độ load của blog.
  • Hỗ trợ cả tên miền tùy chỉnh.
1. Đăng nhập vào blogger / blogspot
2- Vào mẫu (Templates)
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
.pagenavi {
margin-top:40px;margin-bottom:20px;
clear: both;
text-align: center;
}
.pagenavi a, .pagenavi span {
border: 1px solid #a8a8a8;
margin: 2px;
padding: 5px 8px;
text-decoration: none;
background: #e0e0e0;
color: #000;
text-shadow: 0px 1px 0px #fff;
}
.pagenavi a:hover, .pagenavi span.current {
border-color: #a8a8a8;
background: #0099E6;
color: #fff;
text-shadow: 0px 1px 0px #000;
}
.pagenavi span.current {
font-weight: bold;
}
.paginator {
margin-top:0px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
border: 1px solid rgb(218, 215, 215);
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
.paginator {
margin-top:0px;
font-size:1em;
}
.paginator table {
margin-top: 10px;
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding: 8px 10px 8px 10px;
}
.paginator span strong {
background: rgb(0, 175, 21);
font-style: normal;
font-weight: normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:30px; height:30px;
overflow:hidden;
background:url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-arrow-up-icon.png) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
5-  Chèn đoạn code sau vào trước thẻ đóng </body>
<script>
    //<![CDATA[
/*
 Paginator 3000
 - idea by ecto (ecto.ru)
 - coded by karaboz (karaboz.ru)

 How to implement:
 <div class="paginator" id="paginator_example"></div>
 <script type="text/javascript">
  paginator_example = new Paginator('paginator_example', 2048, 10, 1, 'http://www.yourwebsite.com/pages/');
 </script>

 Be sure that width of your paginator does not change after page is loaded
 If it happens you must call Paginator.resizePaginator(paginator_example) function to redraw paginator

*/

/*
 Paginator class
  paginatorHolderId - id of the html element where paginator will be placed as innerHTML (String): required
  pagesTotal - number of pages (Number, required)
  pagesSpan - number of pages which are visible at once (Number, required) 
  pageCurrent - the number of current page (Number, required)
  baseUrl - the url of the website (String)
   if baseUrl is 'http://www.yourwebsite.com/pages/' the links on the pages will be:
   http://www.yourwebsite.com/pages/1, http://www.yourwebsite.com/pages/2, etc
*/
var Paginator = function(paginatorHolderId, pagesTotal, pagesSpan, pageCurrent, baseUrl){
 if(!document.getElementById(paginatorHolderId) || !pagesTotal || !pagesSpan) return false;

 this.inputData = {
  paginatorHolderId: paginatorHolderId,
  pagesTotal: pagesTotal,
  pagesSpan: pagesSpan < pagesTotal ? pagesSpan : pagesTotal,
  pageCurrent: pageCurrent,
  baseUrl: baseUrl ? baseUrl : '/pages/'
 };

 this.html = {
  holder: null,

  table: null,
  trPages: null, 
  trScrollBar: null,
  tdsPages: null,

  scrollBar: null,
  scrollThumb: null,
   
  pageCurrentMark: null
 };


 this.prepareHtml();

 this.initScrollThumb();
 this.initPageCurrentMark();
 this.initEvents();

 this.scrollToPageCurrent();
} 

/*
 Set all .html properties (links to dom objects)
*/
Paginator.prototype.prepareHtml = function(){

 this.html.holder = document.getElementById(this.inputData.paginatorHolderId);
 this.html.holder.innerHTML = this.makePagesTableHtml();

 this.html.table = this.html.holder.getElementsByTagName('table')[0];

 var trPages = this.html.table.getElementsByTagName('tr')[0]; 
 this.html.tdsPages = trPages.getElementsByTagName('td');

 this.html.scrollBar = getElementsByClassName(this.html.table, 'div', 'scroll_bar')[0];
 this.html.scrollThumb = getElementsByClassName(this.html.table, 'div', 'scroll_thumb')[0];
 this.html.pageCurrentMark = getElementsByClassName(this.html.table, 'div', 'current_page_mark')[0];

 // hide scrollThumb if there is no scroll (we see all pages at once)
 if(this.inputData.pagesSpan == this.inputData.pagesTotal){
  addClass(this.html.holder, 'fullsize');
 }
}

/*
 Make html for pages (table) 
*/
Paginator.prototype.makePagesTableHtml = function(){
 var tdWidth = (100 / this.inputData.pagesSpan) + '%';

 var html = '' +
 '<table width="100%">' +
  '<tr>' 
   for (var i=1; i<=this.inputData.pagesSpan; i++){
    html += '<td width="' + tdWidth + '"></td>';
   }
   html += '' + 
  '</tr>' +
  '<tr>' +
   '<td colspan="' + this.inputData.pagesSpan + '">' +
    '<div class="scroll_bar">' + 
     '<div class="scroll_trough"></div>' + 
     '<div class="scroll_thumb">' + 
      '<div class="scroll_knob"></div>' + 
     '</div>' + 
     '<div class="current_page_mark"></div>' + 
    '</div>' +
   '</td>' +
  '</tr>' +
 '</table>';

 return html;
}

/*
 Set all needed properties for scrollThumb and it's width
*/
Paginator.prototype.initScrollThumb = function(){
 this.html.scrollThumb.widthMin = '8'; // minimum width of the scrollThumb (px)
 this.html.scrollThumb.widthPercent = this.inputData.pagesSpan/this.inputData.pagesTotal * 100;
 this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth;
 this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent;
 this.html.scrollThumb.xPosMin = 0;
 this.html.scrollThumb.xPosMax;
 this.html.scrollThumb.widthActual;
 this.setScrollThumbWidth();
}
Paginator.prototype.setScrollThumbWidth = function(){
 // Try to set width in percents
 this.html.scrollThumb.style.width = this.html.scrollThumb.widthPercent + "%";
 // Fix the actual width in px
 this.html.scrollThumb.widthActual = this.html.scrollThumb.offsetWidth;
 // If actual width less then minimum which we set
 if(this.html.scrollThumb.widthActual < this.html.scrollThumb.widthMin){
  this.html.scrollThumb.style.width = this.html.scrollThumb.widthMin + 'px';
 }
 this.html.scrollThumb.xPosMax = this.html.table.offsetWidth - this.html.scrollThumb.widthActual;
}
Paginator.prototype.moveScrollThumb = function(){
 this.html.scrollThumb.style.left = this.html.scrollThumb.xPos + "px";
}
/*
 Set all needed properties for pageCurrentMark, it's width and move it
*/
Paginator.prototype.initPageCurrentMark = function(){
 this.html.pageCurrentMark.widthMin = '3';
 this.html.pageCurrentMark.widthPercent = 100 / this.inputData.pagesTotal;
 this.html.pageCurrentMark.widthActual;
 this.setPageCurrentPointWidth();
 this.movePageCurrentPoint();
}
Paginator.prototype.setPageCurrentPointWidth = function(){
 // Try to set width in percents
 this.html.pageCurrentMark.style.width = this.html.pageCurrentMark.widthPercent + '%';

 // Fix the actual width in px
 this.html.pageCurrentMark.widthActual = this.html.pageCurrentMark.offsetWidth;

 // If actual width less then minimum which we set
 if(this.html.pageCurrentMark.widthActual < this.html.pageCurrentMark.widthMin){
  this.html.pageCurrentMark.style.width = this.html.pageCurrentMark.widthMin + 'px';
 }
}
Paginator.prototype.movePageCurrentPoint = function(){
 if(this.html.pageCurrentMark.widthActual < this.html.pageCurrentMark.offsetWidth){
  this.html.pageCurrentMark.style.left = (this.inputData.pageCurrent - 1)/this.inputData.pagesTotal * this.html.table.offsetWidth - this.html.pageCurrentMark.offsetWidth/2 + "px";
 } else {
  this.html.pageCurrentMark.style.left = (this.inputData.pageCurrent - 1)/this.inputData.pagesTotal * this.html.table.offsetWidth + "px";
 }
}
/*
 Drag, click and resize events
*/
Paginator.prototype.initEvents = function(){
 var _this = this;

 this.html.scrollThumb.onmousedown = function(e){
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();

  var dx = getMousePosition(e).x - this.xPos;
  document.onmousemove = function(e){
   if (!e) var e = window.event;
   _this.html.scrollThumb.xPos = getMousePosition(e).x - dx;

   // the first: draw pages, the second: move scrollThumb (it was logically but ie sucks!)
   _this.moveScrollThumb();
   _this.drawPages();
  }
  document.onmouseup = function(){
   document.onmousemove = null;
   _this.enableSelection();
  }
  _this.disableSelection();
 }

 this.html.scrollBar.onmousedown = function(e){
  if (!e) var e = window.event;
  if(matchClass(_this.paginatorBox, 'fullsize')) return;
  
  _this.html.scrollThumb.xPos = getMousePosition(e).x - getPageX(_this.html.scrollBar) - _this.html.scrollThumb.offsetWidth/2;
  
  _this.moveScrollThumb();
  _this.drawPages();
  
 }
 // Comment the row beneath if you set paginator width fixed
 addEvent(window, 'resize', function(){Paginator.resizePaginator(_this)});
}
/*
 Redraw current span of pages
*/
Paginator.prototype.drawPages = function(){
 var percentFromLeft = this.html.scrollThumb.xPos/(this.html.table.offsetWidth);
 var cellFirstValue = Math.round(percentFromLeft * this.inputData.pagesTotal);
 
 var html = "";
 // drawing pages control the position of the scrollThumb on the edges!
 if(cellFirstValue < 1){
  cellFirstValue = 1;
  this.html.scrollThumb.xPos = 0;
  this.moveScrollThumb();
 } else if(cellFirstValue >= this.inputData.pagesTotal - this.inputData.pagesSpan) {
  cellFirstValue = this.inputData.pagesTotal - this.inputData.pagesSpan + 1;
  this.html.scrollThumb.xPos = this.html.table.offsetWidth - this.html.scrollThumb.offsetWidth;
  this.moveScrollThumb();
 }
 for(var i=0; i<this.html.tdsPages.length; i++){
  var cellCurrentValue = cellFirstValue + i;
  if(cellCurrentValue == this.inputData.pageCurrent){
   html = "<span>" + "<strong>" + cellCurrentValue + "</strong>" + "</span>";
  } else {
   html = "<span>" + "<a href='#'  onclick='redirect"+jenis+"("+cellCurrentValue+");return false'>" + cellCurrentValue + "</a>" + "</span>";
  }
  this.html.tdsPages[i].innerHTML = html;
 }
}

/*
 Scroll to current page
*/
Paginator.prototype.scrollToPageCurrent = function(){
 this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth;
 this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent;
 
 this.moveScrollThumb();
 this.drawPages();
 
}
Paginator.prototype.disableSelection = function(){
 document.onselectstart = function(){
  return false;
 }
 this.html.scrollThumb.focus(); 
}

Paginator.prototype.enableSelection = function(){
 document.onselectstart = function(){
  return true;
 }
}
/*
 Function is used when paginator was resized (window.onresize fires it automatically)
 Use it when you change paginator with DHTML
 Do not use it if you set fixed width of paginator
*/
Paginator.resizePaginator = function (paginatorObj){

 paginatorObj.setPageCurrentPointWidth();
 paginatorObj.movePageCurrentPoint();

 paginatorObj.setScrollThumbWidth();
 paginatorObj.scrollToPageCurrent();
}
/*
 Global functions which are used
*/
function getElementsByClassName(objParentNode, strNodeName, strClassName){
 var nodes = objParentNode.getElementsByTagName(strNodeName);
 if(!strClassName){
  return nodes; 
 }
 var nodesWithClassName = [];
 for(var i=0; i<nodes.length; i++){
  if(matchClass( nodes[i], strClassName )){
   nodesWithClassName[nodesWithClassName.length] = nodes[i];
  } 
 }
 return nodesWithClassName;
}


function addClass( objNode, strNewClass ) {
 replaceClass( objNode, strNewClass, '' );
}

function removeClass( objNode, strCurrClass ) {
 replaceClass( objNode, '', strCurrClass );
}

function replaceClass( objNode, strNewClass, strCurrClass ) {
 var strOldClass = strNewClass;
 if ( strCurrClass && strCurrClass.length ){
  strCurrClass = strCurrClass.replace( /\s+(\S)/g, '|$1' );
  if ( strOldClass.length ) strOldClass += '|';
  strOldClass += strCurrClass;
 }
 objNode.className = objNode.className.replace( new RegExp('(^|\\s+)(' + strOldClass + ')($|\\s+)', 'g'), '$1' );
 objNode.className += ( (objNode.className.length)? ' ' : '' ) + strNewClass;
}

function matchClass( objNode, strCurrClass ) {
 return ( objNode && objNode.className.length && objNode.className.match( new RegExp('(^|\\s+)(' + strCurrClass + ')($|\\s+)') ) );
}


function addEvent(objElement, strEventType, ptrEventFunc) {
 if (objElement.addEventListener)
  objElement.addEventListener(strEventType, ptrEventFunc, false);
 else if (objElement.attachEvent)
  objElement.attachEvent('on' + strEventType, ptrEventFunc);
}
function removeEvent(objElement, strEventType, ptrEventFunc) {
 if (objElement.removeEventListener) objElement.removeEventListener(strEventType, ptrEventFunc, false);
  else if (objElement.detachEvent) objElement.detachEvent('on' + strEventType, ptrEventFunc);
}


function getPageY( oElement ) {
 var iPosY = oElement.offsetTop;
 while ( oElement.offsetParent != null ) {
  oElement = oElement.offsetParent;
  iPosY += oElement.offsetTop;
  if (oElement.tagName == 'BODY') break;
 }
 return iPosY;
}

function getPageX( oElement ) {
 var iPosX = oElement.offsetLeft;
 while ( oElement.offsetParent != null ) {
  oElement = oElement.offsetParent;
  iPosX += oElement.offsetLeft;
  if (oElement.tagName == 'BODY') break;
 }
 return iPosX;
}

function getMousePosition(e) {
 if (e.pageX || e.pageY){
  var posX = e.pageX;
  var posY = e.pageY;
 }else if (e.clientX || e.clientY)  {
  var posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  var posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 }
 return {x:posX, y:posY} 
}
    //]]>
</script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
</script>
<script>
    //<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 r;2 s;2 m;2 f;Q();n R(S){T=U(S/g)+1;2 I=h.1g("1h-1i");J=\'<K 1j="1k" 1l="V"></K><K><a u="1m://1n.1o-W.1p" 1q="1r-1s: 1t; 1u: 1v;" 1w="1x">1y 1z 1A-W</a>\';6(I){I.1B=J}1C=1D 1E(\'V\',T,1F,m,"")}n L(v){2 w=v.w;2 X=U(w.1G$1H.$t,10);R(X)}n Q(){2 4=9;6(4.3("/i/j/")!=-1){6(4.3("?x-5")!=-1){f=4.o(4.3("/i/j/")+14,4.3("?x-5"))}k{f=4.o(4.3("/i/j/")+14,4.3("?&5"))}}6(4.3("?q=")==-1&&4.3(".J")==-1){6(4.3("/i/j/")==-1){s="Y";6(9.3("#p=")!=-1){m=9.o(9.3("#p=")+8,9.Z)}k{m=1}h.11("<7 y=\\""+b+"z/A/B?5-c=1&C=D-E-7&F=L\\"><\\/7>")}k{s="j";6(4.3("&5-c=")==-1){g=1I}6(9.3("#p=")!=-1){m=9.o(9.3("#p=")+8,9.Z)}k{m=1}h.11(\'<7 y="\'+b+\'z/A/B/-/\'+f+\'?C=D-E-7&F=L&5-c=1" ><\\/7>\')}}}n 1J(d){6(d!=1){G=(d-1)*g;r=d;2 H=h.12(\'13\')[0];2 e=h.15(\'7\');e.16=\'17/18\';e.1a("y",b+"z/A/B?1b-1c="+G+"&5-c=1&C=D-E-7&F=M");H.1d(e)}k{l=b;N.u=l}}n 1K(d){6(d!=1){G=(d-1)*g;r=d;2 H=h.12(\'13\')[0];2 e=h.15(\'7\');e.16=\'17/18\';e.1a("y",b+"z/A/B/-/"+f+"?1b-1c="+G+"&5-c=1&C=D-E-7&F=M");H.1d(e)}k{l=b+"i/j/"+f+"?&5-c="+g;N.u=l}}n M(v){O=v.w.1L[0];2 1e=O.1f.$t.o(0,19)+O.1f.$t.o(1M,1N);2 P=1O(1e);6(s=="Y"){2 l=b+"i?x-5="+P+"&5-c="+g+"#p="+r}k{2 l=b+"i/j/"+f+"?x-5="+P+"&5-c="+g+"#p="+r}N.u=l}',62,113,'||var|indexOf|thisUrl|max|if|script||urlactivepage||home_page|results|numberpage|newInclude|lblname1|postperpage|document|search|label|else|alamat|nomerhal|function|substring|PageNo||nopage|jenis||href|root|feed|updated|src|feeds|posts|summary|alt|json|in|callback|jsonstart|nBody|blogPager|html|div|hitungtotaldata|finddatepost|location|post|timestamp|halamanblogger|loophalaman|banyakdata|maksimal|parseInt|paginator1|farhan|totaldata|page|length||write|getElementsByTagName|head||createElement|type|text|javascript||setAttribute|start|index|appendChild|timestamp1|published|getElementById|blog|pager|class|paginator|id|http|www|abu|com|style|font|size|0pt|float|right|target|_blank|Widget|by|Abu|innerHTML|pag1|new|Paginator|numshowpage|openSearch|totalResults|20|redirectpage|redirectlabel|entry|23|29|encodeURIComponent'.split('|'),0,{}))
    //]]>
</script>
  • var postperpage=10; Trong đó 10 là số bài trên 1 trang.
  • var numshowpage=4; Trong đó 4 là số hiển thị trên thanh phân trang.
6- Bấm Lưu mẫu lại.
1- Nếu số bài viết hiển thị trên một trang hiển thị không chính xác. Khắc phục bằng cách vào Chỉnh sửa HTML và tìm tất cả các đoạn code có dạng như bên dưới:
'data:label.url'
Và thay thế nó thành:
'data:label.url + &quot;?&amp;max-results=10&quot;'
Với 10 là số bài viết sẽ hiển thị trên mỗi trang
Lưu ý : giá trị max-result phải bằng giá trị postperpage (10) trong đoạn code ở bước 5 (var postperpage=10;).

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công