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.
Tutorial para instalar nuevas fuentes en Blogger desde Google Fonts
color: color de tu tipo de letra.
background-color: color del fondo del texto.
Para elegir un color diferente, puedes usar esta web:
Colores HTML
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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. <<