.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Cambia el enlace de Leer Más en blogger

5 feb 2021
Hoy vamos a prender como cambiar el enlace de Leer Más en nuestro blog, y personalizarlo a nuestro gusto


Aquí os dejo un código CSS para cambiar el enlace de leer más de nuestro blog.
Como veréis podemos cambiar el tipo de texto y tamaño, centrarlo, estilo del borde, cambiar alto y ancho del recuadro, y el estilo del borde al pasar el ratón.
Para ello nos vamos a 
Tema> Personalizar> Añadir CSS.
Pegamos el código que más nos guste.




  .jump-link{
    font: normal normal 12px Arial; /*Tipografía y tamaño del texto*/
    letter-spacing: 3px; /*Espaciado entre caracteres, si no lo queréis, borradlo*/
    text-align: center; /*Para que quede centrado, sino left para que quede a la izquierda y right para que quede a la derecha*/
    text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
    margin-top: 30px; /*Distancia entre leer más y el texto de la entrada*/
    margin-bottom: 30px; /*Distancia entre leer más y el pie de la entrada*/
    }
    .jump-link a{
    color:#333333; /*Color del texto*/
    background:#dddddd; /*Color de fondo*/
    border:1px solid #333333; /*Estilo del borde*/
    padding:10px 50px; /*Para ajustar el alto y el ancho*/
    }
    .jump-link a:hover{
    color: #333333; /*Color del texto al pasar el ratón por encima*/
    background:#cccccc; /*Color de fondo al pasar el ratón por encima*/
    border:1px solid #333333; /*Estilo del borde al pasar el ratón por encima*/
    text-decoration: none;
    }



Con este código ocupa la entrada total como vemos en la foto 






  .jump-link{
font: normal normal 12px Arial; /*Tipografía y tamaño del texto*/
letter-spacing: 3px; /*Espaciado entre caracteres, si no lo queréis, borradlo*/
text-align: center; /*Para que quede centrado, sino left para que quede a la izquierda y right para que quede a la derecha*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
margin-top: 30px; /*Distancia entre leer más y el texto de la entrada*/
margin-bottom: 30px; /*Distancia entre leer más y el pie de la entrada*/
}
.jump-link a{
color:#333333; /*Color del texto*/
background:#dddddd; /*Color de fondo*/
border:1px solid #333333; /*Estilo del borde*/
padding:10px 50px; /*Para ajustar el alto y el ancho*/
}
.jump-link a:hover{
color: #333333; /*Color del texto al pasar el ratón por encima*/
background:#cccccc; /*Color de fondo al pasar el ratón por encima*/
border:1px solid #333333; /*Estilo del borde al pasar el ratón por encima*/
text-decoration: none;
 }



Solamente nos queda guardarlo y ya lo tenemos¡¡








No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos