Como personalizar la paginación de Blogger

agosto 21, 2014

¿Aburrida de la típica paginación de Blogger? Por defecto, en la página principal, Blogger nos muestra los enlaces de paginación con el tipo de letra que hayamos elegido para el resto del blog desde el Diseñador de Plantillas.



A mí el Diseñador de Plantillas me aburre, es muy limitado y todo el código que se introduce en el modo avanzado se va colocando al final de los estilos de nuestra plantilla HTML de forma desordenada y caótica. El resultado es un código muy sucio que cuando queremos ordenar... ¡nos vuelve locos!

Así que hoy quiero contarte como cambiar el texto de:


  • Página principal.
  • Entradas nuevas.
  • Entradas antiguas.

Por las palabras que tú quieras o por imágenes. Recuerda que si cargas demasiadas imágenes en tu página principal, el tiempo de carga del blog aumenta y eso no le gusta demasiado a Google. Pero todo depende de los objetivos que te hayas marcado con tu blog. A veces no importa aumentar un par de segundos el tiempo de carga si consigues lo que te has propuesto.



CAMBIAR EL FORMATO DE PÁGINAS DE BLOGGER

Empezamos por lo más sencillo. Para cambiar el formato por defecto de nuestra paginación, solo tenemos que añadir un pequeño código en nuestra plantilla HTML.

Para ello:

1.- Vamos a Plantilla >> Editar HTML

2.- Abrimos el buscador interno de nuestra plantilla, pinchando en cualquier zona dentro del código y pulsando a la vez Control + F.

3.- Buscamos: ]]></b:skin>

4.- Una vez localizado, justo encima, pegamos el siguiente fragmento de código:


/* Formato enlaces pie de página
----------------------------------------------- */
.home-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}
.blog-pager-newer-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}
.blog-pager-older-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}
.feed-links {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}

Copiando el código tal cual, el resultado será éste:


5.- Vamos a personalizarlo:

.home-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}

Este primer fragmento se refiere al enlace "´Página Principal". 

font: tipo de letra. Puedes cambiarla por cualquier letra de las que trae Blogger por defecto o instalar una nueva desde Google Fonts y cambiar la que yo tengo (Rouge Script) por la tuya.


color: color de tu tipo de letra. 

background-color: color del fondo del texto.

Para elegir un color diferente, puedes usar esta web:



6.-

.blog-pager-newer-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}

Aquí personalizamos el enlace a nuestras entradas más recientes. Las opciones de personalización son las mismas que hemos visto para la Página Principal.


7.- 

.blog-pager-older-link {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}



Aquí personalizamos el enlace a nuestras entradas más antiguas. Las opciones de personalización son las mismas que hemos visto para la Página Principal.


8.-

.feed-links {
font: normal normal 30px 'Rouge Script', cursive;
color: #DDCDCD;
background-color: transparent;
}

Aquí personalizamos el enlace para suscribirse a nuestro feed. Las opciones de personalización son las mismas que hemos visto para la Página Principal.


CAMBIAR EL TEXTO DE LAS PÁGINAS DE BLOGGER


Ahora que ya tenemos el formato que queremos para nuestra paginación, vamos a ver, dentro de nuestra Plantilla HTML, como cambiar el texto que viene por defecto por el que nosotros queramos. ¡Es muy sencillo!

1.- Abrimos de nuevo el buscador interno y buscamos: <data:newerPageTitle/>

Encontrarás un fragmento de código como el siguiente:

 <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

He marcado en violeta el código que nos interesa, pero fíjate bien que un par de líneas más arriba, aparezca lo subrayado en negrita, para asegurarte de que vas a modificar el trocito de código correcto y no la versión móvil.


2.- Sustituye el fragmento que has buscado: <data:newerPageTitle/> por el texto que quieras que aparezca sustituyendo a: Entradas Nuevas. Por ejemplo:

 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Últimas entradas</a>



3.- Si ahora pinchas en Vista Previa, podrás ver el cambio.


4.- Ahora buscamos: <data:olderPageTitle/> que lo encontrarás un poquito más abajo del anterior:

  <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>


5.- Sustituye la parte del código de color rojo por el texto que quieres que aparezca para tus entradas antiguas. Por ejemplo:

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Entradas Anteriores</a>
      </span>
    </b:if>


6.- Y, por último, la Página Principal. Buscamos: <data:homeMsg/> Encontrarás esto:

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Y solo tienes que cambiar el trozo que has buscado y que te he marcado en azul, por el texto que quieras que aparezca, por ejemplo:

  <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>

Resultado:




CAMBIAR TEXTO PAGINACIÓN POR IMÁGENES


Si prefieres cambiar tus textos de paginación por imágenes, ¡es muy fácil!

1.- Donde has colocado cada texto para tus páginas, tienes que sustituír lo que has escrito por:

<img src='Url de tu imagen'/>


2.- Recuerda alojar tus imágenes en internet, la Url de imágenes alojadas en tu ordenador no sirve, ya que no están online y no se verán. Puedes usar picasa o dropbox, por ejemplo.


3.- Añade la Url de tu imagen subida a internet donde antes has añadido cada uno de los mensajes para Página Principal, Entradas Antiguas y Entradas Nuevas, comprueba en Vista Previa que se ve correctamente.

Por ejemplo, los cambios para obtener un resultado como el que puedes ver en Madrid Bloguea:



Serían:

Fragmento código entradas nuevas:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://lh4.googleusercontent.com/-owm8PPmjbf8/U-c4wyvN3XI/AAAAAAAAYHo/V4V7MzQiDFI/w28-h38-no/new.png'/></a>
      </span>
    </b:if>


Fragmento código entradas antiguas:

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='https://lh3.googleusercontent.com/-SN8gJSYwoZs/U-c4wzUqeXI/AAAAAAAAYHc/ECA7Ayu3scU/w24-h38-no/old.png'/></a>
      </span>
    </b:if>

Fragmento código página principal:

    <a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://lh6.googleusercontent.com/-Y_v5RWy1BIM/U-c4w6CAO-I/AAAAAAAAYHg/JQHUQG-2F-4/w42-h37-no/home.png'/></a>


¡Y listo! Ya tienes la paginación de Blogger personalizada completamente a tu gusto. Solo tienes que dedicar un poquito de atención al código y decidir si prefieres texto o imagen. Con un poco de práctica y perseverancia ¡todo es posible!

>> Ahora estoy preparando packs de iconos de paginación, para que puedas usar imágenes para tus páginas, por si no sabes o no tienes tiempo de diseñar las tuyas. Así que si quieres, puedes decirme en qué colores te gustaría ver los iconos y dejarme el enlace a tu blog en comentarios. <<







Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

8 pensamientos ¡falta el tuyo! ;)

  1. Perfecto y completísimo! Y como siempre, sencillo y bien explicado. Gracias!!

    ResponderEliminar
  2. ¡Gracias, guapas! Me alegra que os sea útil ;)

    ¡¡Feliz finde!!

    ResponderEliminar
  3. ¡Hola! No sé por qué a mi no me cambia el color... tengo especificado un color para los links en general, no sé si será por eso ¿?

    ResponderEliminar
    Respuestas
    1. ¡Hola, Berta!

      Prueba otra vez, me sobraban unas comillas en el código y me di cuenta ahora :)

      ¡Lo siento!

      Gracias y feliz finde ♥

      Eliminar
  4. ¡¡¡Me encantó!!! Me funcionó perfecto, muchas graciaaas.

    ResponderEliminar
  5. Hola, Celia!
    Una duda que creo no haber visto en el post (y mira que está bien explicado...) ¿cómo se quita la línea de puntos o la línea a secas que sale? en el ejemplo que has puesto veo que la han cambiado por una línea doble.
    ¡Muchas gracias y espero que las vacaciones hayan ido bien!

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.