Tutorial: Cómo implementar una paginación numerada en Blogger

LokitoGuzman · 5 Ene 2015

Siguiente y Anterior numerada paginación para Blogger
Por lo tanto, usted está interesado en esta paginación y déjenme decirles más sobre este paginación aquí. Su diseño parece ser IU plana; es más hermosa interfaz de usuario y también tendencias en estos días. Es puramente hizo con JavaScript y CSS. JavaScript hacen las funciones de trabajo, mientras que CSS se utiliza solamente para su diseño. También cuenta con el sistema de numeración y aparte de esto, tiene dos botones siguiente y anterior. Hemos preparado sus 4 colores planos y usted debe elegir el color más apropiado y conveniente con su tema. Estos botones de paginación aparece en la parte inferior de todos los mensajes en la página principal sólo. Consiguen su posición de forma automática, en realidad, ellos que se reemplazarán con defecto botones Siguiente y Anterior.
Tutorial Para Agregar Siguiente y paginación anteriores Botones Blog

Estamos dividiendo el tutorial en dos partes para que pueda llegar a ser fácil para que usted entienda y continuar con el tutorial. La primera es sobre la instalación de las funciones de paginación y segundo es acerca de dar apariencia o el diseño de la misma. Vamos a hacerlo ahora.
1. Instalación Funciones de paginación

--------------------Ir a Blogger Template >> >> Volver Su plantilla
--------------------Haga clic en Editar HTML >> buscar </ body>
-------------------Ahora Pega el siguiente código de seguridad </ body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=5;
var numshowpage=2;
var upPageWord ='« Previous Page';
var downPageWord ='Next Page »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="Page "+nomerhal+' of '+maksimal+"";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<a href="'+home_page+'">'+upPageWord+'</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a>'}}}if(mulai>1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+=''+jj+''}else if(jj==1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
/*]]>*/
</script>
</b:if>
</b:if>

-----------Haga clic en Guardar plantilla
-----------Estás Listo Primera Parte.
-----------Vamos a ir a otra parte
2. Instalación de paginación Diseño Adecuado

Tenemos 4 colores de esta paginación y que deberíamos instalar el color adecuado con su tema.
Abajo de la caja de codificación contiene los códigos de todos los colores y están separados con títulos resaltados que así sea inteligente en la elección del código de derecho para copiar el código de abajo cualquier resaltó la partida.
Ir a Blogger Template >> >> Editar HTML
-----------Buscar ]]></b:skin>
----Por encima de ]]></b:skin> Pegue el código de cualquier skin el color que hallas elegido

//* Red Style ---------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family😱pen sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com...702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

//* Blue Style --------------------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family😱pen sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com...702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

// * Green Style ------------------------------------------ *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family😱pen sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com...702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

//* Dark Style ----------------------------------------------- *//

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family😱pen sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com...702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

Ahora sólo tienes que guardar la plantilla
Ya está!
¿Cómo están los botones siguiente y anterior de paginación? Espero que estén trabajando y mirando fresco en su blog. Sin embargo, si estás frente a cualquier problema en la ejecución en tu blog que no dude en preguntar a continuación en los comentarios y también dejar sus opiniones y compartir esto con tus amigos. ¡Salud!

Este Tutorial lo probé en mi propia pagina y funciona Ver Superman: Man of Steel (2013) Online Gratis | Ver Fast and Furious 6 (2013) Online Gratis| .

FernandoQuintana00 · 8 Ene 2015

[MENTION=125471]LokitoGuzman[/MENTION] editar el post y inhabilitar los emoticones. ya que parte de los código salen con emoticones, de igual forma excelente post solo acomódalo :encouragement:

scanshop · 8 Ene 2015

muy bueno, gracias!

camilo2684 · 9 Ene 2015

Muy buen aporte compañero, gracias 😀!

JoseMCF · 9 Ene 2015

Muy bueno, gracias.🙂

LokitoGuzman · 10 Ene 2015

Que bueno que les sirva 😱

DrusMoya · 10 Ene 2015

Gracias, lo voy a probar!!

jonathan18v · 10 Ene 2015

LokitoGuzman dijo:
Que bueno que les sirva 😱

amigo el post tiene un problema dejaste habilitada los emoticones y si te fijas hay emotiones en parte del codigo

idumaya · 17 Mar 2015

:/ creo que cerraste tu pagina [MENTION=125471]LokitoGuzman[/MENTION] no hay demo

Tutorial: Cómo implementar una paginación numerada en Blogger

LokitoGuzman

FernandoQuintana00

scanshop

camilo2684

JoseMCF

LokitoGuzman

DrusMoya

jonathan18v

idumaya

Temas similares