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.
Con este código ocupa la entrada total como vemos en la foto
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;
}
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;
}
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