Personalizar "Leer más" CSS en Blogger

Leave a Comment

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 -> Buscarpara 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:


  1. .jump-link : Div en el que se encuentra el enlace
  2. .jump-link a : El enlace en sí, como puede ser pucomi
  3. .jump-link a:hover : El comportamiento del enlace (colores...) al pasar el ratón por encima.
  4. .jump-link a:visited : Una vez que has visitado el enlace, aparecerá así.
  5. .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