#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Tablas o pestañas para tu blog
Calendario que muestra los post publicados
Plantilla Kate Blogger
Slider de texto o de imágenes
Menú Blogger
Sustituir puntos por comas en Excel
Crea en línea una galería de imágenes gratuitamente
Menú vertical con movimiento
Efectos de los vínculos de nuestras entradas
Etiquetas en forma de menú desplegable
Sunshine Blogger Template
Entradas Populares de forma horizontal

Cambia el enlace de Leer Más en blogger

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¡¡








Publicar un comentario

0 Comentarios