Primeros pasos
Para personalizar el "Sigue leyendo", "Leer más", etc. simplemente nos dirigimos en el panel de configuración de blogger a: Plantilla -> Edición de HTML
Una vez aquí pulsamos "Ctrl + F" en Chrome/Firefox o "Editar -> Buscar" para buscar texto en la página y escribimos .jump-link que es la clase de CSS con la que podremos personalizar el famoso Leer más.
Entendiendo el CSS
Bien, ahora vamos a explicar q ué es cada uno:
- .jump-link : Div en el que se encuentra el enlace
- .jump-link a : El enlace en sí, como puede ser pucomi
- .jump-link a:hover : El comportamiento del enlace (colores...) al pasar el ratón por encima.
- .jump-link a:visited : Una vez que has visitado el enlace, aparecerá así.
- .jump-link a:active : El comportamiento al hacer click
Ahora un ejemplo de cuál sería la sintaxis:
.jump-link a {
color: white;
background-color: black;
}
.jump-link a:hover {
color: black;
background-color: white;
}
Para personalizarlo podéis buscar en internet estilos ya hechos o aprender CSS y hacer uno :)
Un ejemplo de estilos
Este ejemplo lo he encontrado en internet, no es mío. Enlace
.jump-link {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}
Follow me on twitter for news: @Pirobtumen
0 comentarios:
Publicar un comentario