Tạo phân trang cuộn đẹp cho blogspot

Đăng bởi Admin | 5/7/13 | 0 nhận xét

Phân trang (Page Navigation) có nhiều phiên bản. Trong quá trình thiết kế blog để 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),... Theo namkna thì tiện ích Page Navigation do Abu-Farhan phát triển mà namkna đã giới thiệu trước đây tại bài viết Phân trang (Paginator) cuộn đẹp cho Blogspot trên 3000 bài viết   là hoàn thiện nhất.

Bạn có thể xem ảnh minh họa bên dưới:

VIEW DEMO

» Ưu điểm:

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

» Cách thêm phân trang Page navigation scolling style 2 cho blogspot có trên 3000 bài viết.

1. Đăng nhập vào blog
2- Vào mẫu (Template)
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7YioVhRTh76RTDMsIjcXUOYVQWlhquutSKchJE2wGZCms9Dpe6spMySUGiciuCeYtpN6n22jz0yL_wk8CVrCcyNx2K_kVqSn4YlLY7XYnXEWOToRIJf8IGlQvN_USK9bzcsPoBr7rWiI/s1600/slider_knob-namkna-blogspot-com.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2pssYpmCTpgzsYiMUfEbBUbUW9Vu1tzXEEHQPX6Yvptu54G1hdrFg4-3ufDayj4Bt7VjIsXTjgqaJDLlSJ3I4Fms77d8SbpOZ6dsvAvEh_35hI3XCsommBcDKQ7bhnrf-iPdfrmnaOF2/s1600/Actions-arrow-up-icon-namkna-blogspot-com.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>

» Tùy chỉnh:

• 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.
• Xóa màu cam lếu lưu gặp lỗi

6- Bấm Lưu mẫu lại.

¤ Cài đặt nâng cao!

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 + "?&max-results=10"'

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

2. Bạn có thể gộp các file js ở bước 5 vào (hoặc tải về Tại đây) sau đó tải lên host google code để  dùng lâu dài theo cú pháp bên dưới:

<script src='paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
</script>
<script src='paginator3000-forblogger-v1.0.1.js' type='text/javascript'></script>

                                                                                                Theo: Namkna

                                                                                                Thu thuat vi tinh