Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Numerando páginas en blogger. ¡Ha llegado la paginación!

La paginación ha llegado a blogger.

Se trata de numerar las paginas del blog, es decir, son como una especie de botoncitos que nos permiten ver las entradas en orden, y se numeran las paginas del blog...


Diseño>añadir gadget (elemento de página)>html-javascript


El código:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:10px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=1;
var firstPageWord = 'Primera';
var endPageWord = 'Última';
var upPageWord ='Anterior';
var downPageWord ='Siguiente';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Quedaría así...

Debes saber...

showpageArea a Son los enlaces y los números, podemos editarlos y ponerles un borde por ejemplo.

showpageArea
Representa el bloque donde se muestra la paginación.


showpageArea a:hover
Representa el efecto que tendrá cuando pasemos el cursor por encima.


showpageNum a
y .showpageNum a:hover Representa los enlaces y los números de las páginas.


showpagePoint Representa lo que estás viendo, por ejemplo, haces click en la página 2 y te explica que estás viendo la página 2.

showpage a
y .showpage a:hover Est
o representa el texto de los enlaces, para cambiarlos ve a esa parte.

var pageCount Es la cantidad de entradas que se mostrarán por página.
Por ejemplo si var pageCount=4 se verán 4 entradas por cada página.

var displayPageNum Es la cantidad de páginas que se mostrarán.
Por ejemplo, si var displayPageNum=1 entonces se mostrarán 1 página y 1 página, por lo tanto serían 2 páginas.

Mon dice...

Buenas Jaime,
Hace tiempo que estoy intentando encontrar la manera de poner enlaces de paginación a mi blog. Pero no se porque no resulta. Creo que debo haber borrado algun elemento, porque este código tampoco me funciona. No se ve.

Lo he probado en otro blog y el código funciona, el error es de mi pagina principal. Difistint@s.

Podrias ayudarme?

Un abrazo !

Mon

Jaime Trujillo Escobedo dice...

Hola Mon, intenta realizarlo de nuevo, esque debería funcionar, es por medio de un gadget, al no ser que sin darte cuenta borraras parte del código, pero es poco probable ya que es en un elemento html-javascript :-( voy a intentar preguntar y ayudar de algún modo ;-) Saludos!

ViVy dice...

hola!
funciona, pero como hago para que aparezcan mas de 3 post por pagina?
gracias!

Jaime Trujillo Escobedo dice...

Hola ViVy! pués eso es fácil:-) debes buscar la etiqueta:

var pageCount=4

y cambiar el 4 por el número de entradas que quieras mostrar :-) puedes encontrar la etiqueta fácilmente apretando Ctrl y F

Si necesitas algo más dímelo ;-) un abrazo0!

ViVy dice...

siii!!
muchisimas gracias nuevamente!!!

Jaime Trujillo Escobedo dice...

Hola ViVy!! me alegra que te guste el truco :-) un gran saludo!! :-)

reyo dice...

Hola Jaime, felicidades por tu página. He puesto en mi blog la paginación y funciona pero me gustaria ponerlo que saliera todo más grande, cambio
.showpageArea a:hover {
font-size:11px;
y lo he puesto mayor pero sigue igual. Dime como cambiar el tamaño de la fuente y si los cuadritos se pueden hacer mayores. Gracias

Elreyo

Jaime Trujillo Escobedo dice...

Hola reyo, me alegra que te gustara El Balcón :-) verás, para cambiar el tamaño de los números, prueba aquí:

.showpageNum a:hover {
font-size:11px;

Lo que tu cambiaste es el tamaño al pasar el cursor por encima (hover) suerte! si no te funciona, dímelo y buscamos otra forma :-) Saludos!! :-)

Marianoaxl dice...

Antes que nada, Muchas Gracias por la forma tan clara de explicar las cosas.Mi problema: al pasar de página
no aparece el post siguiente sino que lo saltea y no lo muestra, y asi en cada salto de página. O sea, pierdo un post en cada salto. Desde ya gracias por tus aportes y muchas gracias si encuentras mi solución.

Jaime Trujillo Escobedo dice...

Ya veo marianoaxl, puede deberse a que tu plantilla está muy editada, no es de blogger.. :-S más adelante pondré otro método de poner la paginación, si quieres, puedes esperar un tiempo y la pones ;-D siento no haberte podido solucionar esto pero esque no sé muy bien a lo que puede deberse :-S

Marianoaxl dice...

Ningun problema Jaime. Agradezco tu tiempo y espero puedas encontrar mi solución. Sigo a la espera y me agrego como tu seguidor, la verdad, por tu atención te lo mereces. Un gusto y un saludo de mi parte.

Jaime Trujillo Escobedo dice...

Hola marianoaxl! pués haber si consigo arreglar este, espero que sí :-D gracias por unirte a los seguidores :-D un graan saludo0!
:-D

Gildo Kaldorana dice...

Gracias, muchas gracias por tu blog.
He probado esta entrada y me va bien.
Un saludo.

Jaime Trujillo Escobedo dice...

Gildo Kaldorana, es cómodo esto de la paginación =) me alegra que te guste :)

Saludos ☺

Virginia G dice...

Hola!!
Te agradezco mucho los trucos para Blogger que tienes publicados. Me estan ayudando muchisimo diseñar mi blog y a ponerlo a mi gusto:
http://virteam.blogspot.com/

Acabo de incorporar esta numeración (que me parece mucho mas claro para el lector que lo de "entradas antiguas". Funciona muy bien, pero, me gustaría colocarlo "más sencillo".

Que solo aparezca el showpagePoint y los numeros de las paginas , y quitar los recuadros de "primera", "anterior", "siguiente" y "ultima". ¿Podría hacerse esto?

Gracias, y un saludo!!

Jaime Trujillo Escobedo dice...

Hola Vir, ya veo, tu blog está chulísimo =)

Entiendo lo que quieres decir. Para ello se necesitaría otro código o personalizar este un poco.

Echaré un vistazo al código e intentaré hacer lo que me pides :-D ^_^

Vaeneria dice...

Gracias! Quedó perfecto. Sigo navegando en tu blog. Saludos :D

Jaime Trujillo Escobedo dice...

Vaeneria, ¡Estupendo! me alegro mucho de estarte ayudando.

La revista de cirugia estetica dice...

Hola,
he puesto el gadget en mi blog, pero cuando entro en cualquier categoria, primero me salen las 20 correspondientes de bloger y la numeración al final. Cuando hago clik en la numeración entonces empiezan a salir de 5 en 5 aunque primero se carga el "entradas antiguas" "entradas más recientes" de bloger y despues la numeración. ¿como puedo hacer para que desde un principio solo salgan 5 entradas por categoria?

Jaime Trujillo Escobedo dice...

La revista de cirugia estetica, hay una forma de modificar el número de entradas a mostrar en las páginas de etiquetas.

Te dejo con esta entrada en la que explico cómo hacerlo :D.

Fuentecillas dice...

Gracias Jaime.
Por todo lo que nos enseñas, yo sigo leyendo y aprendiendo y practicando. ¡¡ Con un poco de miedo por si la lió¡¡ pero de momento no me achanto.
Saludos y gracias de nuevo

Jaime Trujillo Escobedo dice...

Claro que sí, Fuentecillas , como debe ser. Los trucos son para probarlos y comprobar si son del agrado de uno mismo.

Afortunadamente, siempre podemos eliminarlo en caso de no gustarnos o descargar una copia del blog al realizar trucos complicados y evitar así complicaciones.

¡Saludos!

Fuentecillas dice...

Hola Jaime.
Fuen ataca de nuevo.
Vamos a ver, lo pongo pero me dice que debo poner algo en el título del HTML.
Campo obligatorio; no debe dejarse en blanco.¿ Qué hago mal? Dame pistas.
Otra cosilla, ahí donde tu tienes " Escribe tu comentario en la entrada", que tengo que hacer para cambiar el texto. Dame más pistas.
Espero paciente tu pistas.
Gracias de antemano.
Fuen

Jaime Trujillo Escobedo dice...

¡Y la alegría que me das, Fuen! Tranquila, en el título del gadget escribe el carácter   y publícalo como haces normalmente. De esta forma el gadget no tendrá título ni error alguno.

El texto del que hablas es totalmente personalizable. Accede a esta entrada y aprenderás a editarlo ;).

Fuentecillas dice...

¡ay Jaime¡¡
No me deja guardar, o blogger esta tonto o alguna he liado.
Más pista, por fi.
Los comentarios me tienen frita, Me sale en una cosa que tengo , que no se como se llama( Lo puse para votar , bien-mal- regular) y ahora no se quitarlo.
¡¡ Ves como soy torpe¡¡
Fuen

Jaime Trujillo Escobedo dice...

Tranquila Fuen, esto tiene una solución muy simple:

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código y bórralo:

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

Guarda la plantilla para comprobar el resultado.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo