Cómo 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?

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.

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.

Ahora vamos a ver cómo personalizarlos para que se ajusten a nuestras necesidades. Bajo el vídeo, tienes todos los códigos que necesitas para este tutorial. Dale al play!

CAMBIAR COLOR Y AJUSTAR TAMAÑO

 .fa-chevron-right{
color: #F4C1D9;
font-size: 30px;
}

.fa-chevron-right:hover{
color: #F4C1D9;
}

.fa-chevron-left{
color: #F4C1D9; 
font-size: 30px;
}

.fa-chevron-left:hover{
color: #F4C1D9;

}

.fa-home{
color: #F4C1D9;
font-size: 30px;
}

.fa-home:hover{
color: #F4C1D9;
}

AÑADIR BORDES

 .fa-chevron-right{
color: #F4C1D9;
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
}

.fa-chevron-right:hover{
color: #FFFFFF; 
background: #F4C1D9;
border-radius: 0px;
padding: 20px;
}

.fa-chevron-left{
color: #F4C1D9; 
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
}

.fa-chevron-left:hover{
color: #FFFFFF; 
background: #F4C1D9;
border-radius: 0px;
padding: 20px;
}

.fa-home{
color: #F4C1D9;
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
}

.fa-home:hover{
color: #FFFFFF; 
background: #F4C1D9;
border-radius: 0px;
padding: 20px;
}

AÑADIR FONDOS

 .fa-chevron-right{
color: #FFFFFF;
font-size: 30px;
background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;
border-radius: 70px;
padding: 20px; }

.fa-chevron-right:hover{ 
color: #727272;
background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;
border-radius: 20px;padding: 20px;}

.fa-chevron-left{
color: #FFFFFF;font-size: 30px;
background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;
border-radius: 70px;
padding: 20px;}

.fa-chevron-left:hover{
color: #727272;
background:url(http://i63.tinypic.com/2nkt6v5.jpg)repeat;
border-radius: 20px;
padding: 20px;}

.fa-home{
color: #FFFFFF;
font-size: 30px;
background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;
border-radius: 70px;padding: 20px;
}

.fa-home:hover{
color: #727272;
background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;
border-radius: 20px;padding: 20px; }

AÑADIR EFECTO ROTACIÓN

 .fa-chevron-right{
color: #F4C1D9;
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s; 
transition-duration: 0.8s; 
-webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
transition-property: transform;
 overflow: hidden;}

.fa-chevron-right:hover{
-moz-border-radius:50px; 
-webkit-border-radius:50px; 
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
}

.fa-chevron-left{
color: #F4C1D9;
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s; 
transition-duration: 0.8s; 
-webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
transition-property: transform;
 overflow: hidden;
}

.fa-chevron-left:hover{
-moz-border-radius:50px; 
-webkit-border-radius:50px; 
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
}

.fa-home{
color: #F4C1D9;
font-size: 30px;
border: 2px solid #F4C1D9;
border-radius: 70px;
padding: 20px;
-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s; 
transition-duration: 0.8s; 
-webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
transition-property: transform;
 overflow: hidden;
}

.fa-home:hover{
-moz-border-radius:50px; 
-webkit-border-radius:50px; 
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
}

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!