Personalizar enlace Leer más | Blogger

28 de marzo de 2016


Hola hermosos lectores, feliz inicio de semana :) empezamos la semana con un nuevo tutorial. Esta vez aprenderemos a personalizar el enlace de leer más o Seguir leyendo.

Como siempre no es más que un código que agregar en la sección de CSS, así que sin más empecemos.

Tenemos dos opciones para personalizar este enlace, a continuación te las muestro:


OPCIÓN 1:


Para personalizar este enlace debes dirigirte a Plantilla → Personalizar → Avanzado → Añadir CSS.

Una vez allí colocas el siguiente código:

.jump-link{
font: normal normal 12px Arial; /*Tipografía y tamaño del texto*/
letter-spacing: 3px; /*Espaciado entre caracteres, si no lo quieres borra esta línea*/
text-align: center; /*Para que el texto 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 borra esta la línea*/
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-top: 1px solid #333333; /*Borde superior*/
border-bottom: 1px solid #333333; /*Borde inferior*/
border-left: 1px solid #333333; /*Borde izquierdo*/
border-bottom: 1px solid #333333; /*Borde derecho*/
display:block;
padding:10px; /*Para cambiar el alto*/
}
.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;
}

OPCIÓN 2:


De igual forma si quieres este modelo debes dirigirte a Plantilla → Personalizar → Avanzado → Añadir CSS.

Y colocar el siguiente código:


.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-top: 1px solid #333333; /*Borde superior*/
border-bottom: 1px solid #333333; /*Borde inferior*/
border-left: 1px solid #333333; /*Borde izquierdo*/
border-bottom: 1px solid #333333; /*Borde derecho*/
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;
}

Modificación:

* En ambos casos las modificaciones que puedes hacer están al lado de cada línea del código.
* Los colores están en HTML y los puedes encontrar AQUI.
* Los tipos de línea son los siguientes


Nota: Para cambiar el texto del enlace Leer más, sólo tienes que dirigirte a DISEÑO y luego:

Y te saldrá una ventana donde puedes cambiar el texto:



¿Y tu utilizas este enlace? Hace un tiempo escribí un post donde menciono los Pro y los Contra de tener el enlace de leer más. Si no lo has leído te lo dejo AQUÍ.

¿Te ha gustado este tutorial? ¿Quieres saber cómo colocar una imagen en vez de el enlace? dímelo en los comentarios. Que tengan un hermoso día. Besos.

5 comentarios:

  1. ¡¡Me apunto este tutorial!! ^^ Es súper útil y está muy bien explicado, así que cuando lo ponga en práctica veré los resultados :)

    ¡Besos!

    ResponderEliminar
  2. Hola!
    Muchas gracias por el tutorial, no sé qué haríamos sin ti aquellos a los que no se nos da nada bien esto jajaja
    Besos

    ResponderEliminar
  3. Hola!
    Me encanto el tutorial porque yo soy más de poner imagenes pero es una buena opción hacer la personalización directamente.
    Gracias por compartir el tutorial.
    Besos

    ResponderEliminar
  4. HOLAAAAAAAAAA
    Muchas gracias por el post, super bueno n.n
    en este caso no lo utilizo porque ya lo tengo dsde hace un tiempo :D
    saludos!

    ResponderEliminar
  5. Gracias por el post y hasta me animé a modificarlo para adaptarlo a mis necesidades. Que bueno que haya gente que sepa más que uno y que lo comparta!

    ResponderEliminar