20 mayo 2016

Cómo sustituir entradas antiguas y recientes por imágenes o iconos

sustituir-entradas-antiguas-y-recientes-por-imágenes-o-iconos


Si eres de las que te gusta personalizar hasta el último rincón de tu blog y aún no habías cambiado los enlaces de entradas antiguas y recientes a tu gusto, hoy vengo a ponerle remedio. Desde que decidí crear una serie de tutoriales para personalizar el blog usando iconos o imágenes, ya has podido ver:




 Como instalar iconos en el blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir

 Cómo instalar un botón de subir con imágenes o iconos






Pues bien, le toca el turno a los enlaces de entradas recientes, antiguas y home que aparecen al final del blog y que tienen este aspecto tan... sosete ¿verdad?


enlaces-entradas-antiguas-recientes-tutorial


Te voy a mostrar 2 maneras de personalizar estos enlaces: con imágenes o con iconos.




PERSONALIZAR ENTRADAS ANTIGUAS Y RECIENTES CON IMÁGENES


A mí personalmente me gusta mucho más cómo queda con iconos, pero como para gustos colores, pues he diseñado algunos botones por si prefieres usar imágenes. Estas son mis propuestas, dentro de cada color, tienes 2 opciones: botones con texto o sin él. La descarga incluye los 6 para que los combines como quieras. Si te gustan puedes descárgarlos clicando en la imagen correspondiente.


botones-entradas-antiguas-recientes-freebies


botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies

botones-entradas-antiguas-recientes-freebies



Y ahora vamos con el tutorial, que es muy facilito. Dale al play!:





 Dirígite a Plantilla>EditarHTML y haciendo previamente un clic en cualquier sitio dentro de la plantilla  pulsa CTRL+F para que aparezca la caja de búsqueda, donde tendrás que pegar <data:newerPageTitle/> y darle a intro para que te localice la etiqueta.

Una vez la tienes, toca sustituirla por la imagen-botoncito que hayas elegido, pegando esto en su lugar :

<img src='IMAGEN ENTRADAS RECIENTES' width="75" />

Donde pone imagen entradas recientes, tendrás que pegar la dirección de tu imagen y el 75 es para que adaptes la medida de esa imagen a tus necesidades.


 Ahora tendrás que hacer lo mismo con el enlace de home y entradas antiguas. Si te fijas, los tienes justo a continuación, pero si te lías cuando ves código, lo mejor es que vuelvas a pegar el código que vas a sustituir en la caja de búsqueda y así no hay peligro a equivocarse.


Para entradas antiguas, pega <data:olderPageTitle/> y sustituye por:


<img src='IMAGEN ENTRADAS ANTIGUAS' width="75" />


 Para la página principal, pega <data:homeMsg/> y sustituye por:



<img src='IMAGEN PAGINA PRINCIPAL' width="75" />



Y ya está, una vez lo tengas guardas los cambios y listo. Si no sabes cómo copiar la dirección de una imagen, mírate este post en el que te explico este y otros conceptos básicos para Blogger.




PERSONALIZAR ENTRADAS ANTIGUAS Y RECIENTES CON ICONOS



Para poder usar iconos en tu blog, debes haber instalado primero la cartera de iconos en la plantilla. Esto te lo expliqué en el primer tutorial de esta serie de personalización con iconos Es muy sencillo y no te llevará ni 2 minutos, así que una vez lo tengas, ya sólo te quedará localizar las etiquetas que vas a sustituir.

El proceso es el mismo, tanto para imágenes como para iconos.


 Dirígite a Plantilla>EditarHTML y haciendo previamente un clic en cualquier sitio dentro de la plantilla  pulsa CTRL+F para que aparezca la caja de búsqueda, donde tendrás que pegar <data:newerPageTitle/> y darle a intro para que te localice la etiqueta.

Una vez la tienes, toca sustituirla por el icono que prefieras, yo en mi caso, he escogido este para el enlace de entradas recientes :

<i class="fa fa-chevron-left" aria-hidden="true"></i>

 Ahora tendrás que hacer lo mismo con el enlace de home y entradas antiguas. Si te fijas, los tienes justo a continuación, pero si te lías cuando ves código, lo mejor es que vuelvas a pegar el código que vas a sustituir en la caja de búsqueda y así no hay peligro a equivocarse.


Para entradas antiguas, pega <data:olderPageTitle/> y sustituye por el que más te guste. Yo he elegido:


<i class="fa fa-chevron-right" aria-hidden="true"></i>

 Para la página principal, pega <data:homeMsg/> y sustituye por el que más te guste. Yo he elegido:


<i class="fa fa-home" aria-hidden="true"></i>


Si te parece complicado, míra el vídeo, que te lo explico en un momentín:





Bueno, pues ya tenemos nuestros enlaces a entradas recientes, antiguas y página principal, más aparentes gracias a los iconos. Si quieres saber cómo personalizarlos para que luzcan como te muestro en este vídeo, lo podrás ver si te unes a la Comunidad Demo 2.0, porque hoy toca contenido exclusivo en el blog privado. Bajo el vídeo, te cuento todas las ventajas de la Comunidad Demo 2.0, no te las pierdas!











Y con esto terminamos ¿te ha gustado este tutorial? ¿por qué elemento te has decantado imágenes o iconos? ¿qué modelo de personalización has elegido para tu blog?

Si te ha resultado útil, no olvides compartir para que le sirva a más compis


Cómo cambiar enlaces de entradas antiguas/recientes (tutorial+freebies) Tuitéalo




¡Que tengas un gran día!






¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:





2 comentarios:

  1. Excelente querida Raquel, he podido colocar botones para las entradas antiguas, recientes y para el home! Buen trabajo! Saludos!

    ResponderEliminar
    Respuestas
    1. Me alegro muchísimo que te haya servido Juan Fernando =D te han quedado muy bien. Un saludo!

      Eliminar

demo