sábado, 27 de julio de 2013

Cambiar Entradas Antiguas y Entradas más recientes por imágenes

7/27/2013 03:32:00 p. m. Por 8 comentarios

Cambiar Entradas Antiguas y Entradas más recientes por imágenes

Como habrás visto, Blogger añade en la parte inferior del blog unos links para navegar por las diferentes páginas de entradas, para poder ver entradas más antiguas o más nuevas (Entradas antiguas - Entradas más recientes). Al igual que en cada entrada pone los mismos links para avanzar o retroceder a una entrada más reciente o más antigua.

El truco de hoy consistirá en personalizar estos enlaces y cambiarlos por una imagen que actue de botón, para dar un aspecto más personalizado al blog.

Tutorial


Para cambiar los enlaces por imágenes tendremos que realizar los siguientes pasos:
  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.

Para modificar el botón Entradas más recientes
  • En el código buscamos:
<data:newerPageTitle/>

  • Lo sustituimos por:
<img src='URL imagen entradas más recientes'/>


Para modificar el botón Entradas antiguas
  • En el código buscamos:
<data:olderPageTitle/>

  • Lo sustituimos por:
<img src='URL imagen entradas antiguas'/>


Para modificar el botón Página Principal
  • En el código buscamos:
<data:homeMsg/>

  • Lo sustituimos por:
<img src='URL imagen página principal'/>

Personalización de botones


Tan solo tenemos que cambiar el texto subrayado en amarillo por la URL de la imagen que queramos poner.

A continuación pongo algunas imágenes que he creado que podéis utilizar para vuestro blog.

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

8 comentarios :

  1. hola, gracias por este articulo me ha servido de mucho, lo unico una duda, no consigo cambiar la imagen del home page... ¿porque puede ser? :s

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. ¡Genial! Este tutorial era el que estaba buscando. Muchas gracias por compartirlo.

    ResponderEliminar
  5. Por fin, algo facil de entender, habia visto esto mismo en otros blogs pero se daban mil vueltas para explicarlo, facil y entendible muy bueno un saludo!
    http://como-bajar-de-peso-rapido-web.blogspot.com/

    ResponderEliminar
  6. muchas gracias.. me sirvió.. un tutorial simple pero muy util

    ResponderEliminar
  7. Buen post muy bien explicado, me quedó súper, mira: el blog de Martin Maletta www.martinmaletta.com
    ¡Gracias!

    ResponderEliminar