27 de septiembre de 2016

Tutorial: Personalizar el gadget de "Entrada Destacada"

Desde el año pasado se puso a la disposición de blogger el gadget  de "Entrada destacada". Es uno de los gadgets más útiles al momento de destacar un post y lograr que tenga más visitar o para la publicidad de un evento que se dará próximamente en el blog.

Tal y como ya sabes, el gadget tiene básicamente tres partes que el día de hoy te enseñare a personalizar a tu total gusto.
  • El título de la entrada destacada.
  • Las primeras líneas de texto del post.
  • La imagen.
Así es como se ve al principio, -sin personalización- el gadget de entrada destacada.
Entrada de prueba en un blog de pruebas
En cualquier blog y sin modificar tendrá una característica muy básica. 

Cualquiera de los cambios que quieras realizar en el gadget de entrada destacada, lo harás añadiendo un código CSS en tu blog. Así que dirígete a: 
  • Editar plantilla >> Avanzado >> Añadir CSS

Título de la entrada destacada

Las características del título son parecidas a los títulos h3 que tienes definidos en tu blog. El título es también un enlace y ambos se pueden definir a tu gusto de dos maneras; cuando el link no ha sido visitado y cuando el visitante ya ha visitado el post.

Cambiar el estilo del título (antes de ser visitado)

Lo más resaltante es que puedes cambiar el color del título, la fuente (tipo de letra) y el tamaño de esta utilizando .post-summary a; ejemplo:
Resultado al utilizar diferentes
códigos con la etiqueta .post-summary a
.post-summary a {
color:#e23058 !important;
font-size: 130%;
font-family: 'Arial', serif;
letter-spacing: 1px;
text-shadow: 0 0 0.1em #ccc;
text-transform: uppercase;
}
Entendiendo el código:
  • color: hace referencia al color del título. Se utiliza el sistema hexadecimal de colores.
  • font-size: es el tamaño de la fuentes. El porcentajes del 100% representa el tamaño de la fuente que ya tienes y si aumentas el porcentaje va aumentando el tamaño, de igual manera, si lo disminuyes la letra será más pequeña.
  • font-family: Opción para modificar el tipo de letra. En mi caso utilice algo muy simple y que se adapta en cualquier plataforma - Arial.- Pero en tu caso puedes utilizar cualquier fuente, siempre y cuando este adaptada para ser utilizada en tu blog. 
  • letter-spacing: Es el espacio de separación que tiene cada letra del título del post destacado. Mientras más aumentes el número, mayor será la separación 
  • text-shadow: En la sombra alrededor de las letras del título, si no quieres esta opción cambia el 1 por 0, y si quieres más sombra aumenta el número, puedes cambiar el color de la sombra utilizando el sistema hexadecimal de colores.
  • text-transform: Trasformación del texto, en este caso (uppercase) hará que el texto aparezca en mayúsculas.

Cambiar el estilo del título (cuando ya esté visitado)

Puedes cambiar los elementos del caso anterior si quieres un nuevo estilo, pero si quieres que se mantenga igual, pon las mismas características de arriba, solo cambiando la etiqueta .post-summary a por .post-summary a:visited; ejemplo
 .post-summary a:visited {
color:#e23058 !important;
font-size: 130%;
font-family: 'Arial', serif;
letter-spacing: 1px;
text-shadow: 0 0 0.1em #ccc;
text-transform: uppercase;
}
Otras caracterices que puedes añadir es: 
  • text-decoration: lineas dentro y fuera del texto. (text-decoration: line-through;)

Centrar el título

Simplemente añade una nueva extensión al código que haga referencia al título.
.post-summary h3 {
text-align:center;
}

Texto de la entrada destacada

Resultado al utilizar la
etiqueta .post-summary p
Como el caso anterior, también podemos cambiar el color, el tamaño y la fuente, además puedes centrar el texto o justificarlo en el mismo código, solo utiliza la etiqueta .post-summary p; ejemplo:
.post-summary p{
color: #000;
font-size: 100%;
font-family: Lato;
text-align: justify;
letter-spacing: 1px;
}
Entendiendo el código:
  • color: hace referencia al color del título. Se utiliza el sistema hexadecimal de colores.
  • font-size: es el tamaño de la fuentes. El porcentajes del 100% representa el tamaño de la fuente predeterminada y si aumentas el porcentaje va aumentando el tamaño, de igual manera, si lo disminuyes la letra será más pequeña.
  • font-family: Opción para modificar el tipo de letra. Puedes utilizar cualquier fuente, siempre y cuando este adaptada para ser utilizada en tu blog. 
  • text-align: Alineación del texto, puedes centrarlo o justificarlo. En el ejemplo el texto ha sido justificado. 
  • letter-spacing: Es el espacio de separación que tiene cada letra. Mientras más aumentes el número, mayor será la separación 
Otras caracterices que puedes añadir es: 
  • text-shadow: sombra alrededor de las letras. (text-shadow: 0 0 0.0em #ccc;)
  • text-transform: trasformación del texto. (text-transform: lowecase;)
  • text-decoration: lineas dentro y fuera del texto. (text-decoration: line-through;)
ejemplos de text-decoration

Eliminar el texto de la entrada destacada


Los primeros párrafos nunca muestras la mejor parte del post, en la mayoría de los casos es una presentación o bienvenida a la entrada, por lo que si lo deseas puedes hacer que el texto corto de la entrada destacada no aparezca. Esto lo puedes lograr modificando el gadget o mediante un sencillo código css. Al optar por esto en el gadget solo aparecerá la imagen del post
Pala lograrlo utiliza:
.post-summary p{
display: none !important;
Resultado

}

Imagen de la entrada destacada 

Esta opción es una de mis favoritas, la primera imagen de una entrada puede no hacer mucha referencia a la esencia del post, por lo que si deseas cambiarla utiliza la etiqueta, .post-summary img; ejemplo
.post-summary img{
content: url('URL_DE_LA_FOTO') !important;
}
  • URL_DE_LA_FOTO: Colocaras ahí, el url de la nueva imagen que quieras que aparezca. 

Bordes de la imagen

Jugando con los códigos he encontrado una manera diferente de presentar la imagen, ya sea la predeterminada o la de tu elección. Lo hacemos utilizando nuevamente la etiqueta .post-summary img; ejemplos

  • Ejemplo #1
.post-summary img{
border-radius: 50%;
display: block;
margin: auto;
width: 95%;
}
  • Ejemplo #2
.post-summary img{
border-radius: 8px;
display: block;
margin: auto;
width: 95%;
  • Ejemplo #3
.post-summary img{
border-radius: 0%;
display: block;
margin: auto;
width: 95%;
border: 1px solid #ddd;
padding: 5px;
  1. Si deseas hacer todo eso -con una nueva imagen como anteriormente explicamos- solo agrega antes de }  " content: url('URL_DE_LA_FOTO') !important; "
Entendiendo el código:
  • border-radius: radio de la imagen. Mientras más alto sea el porcentaje más redondeada estará la imagen, con 50% dará el resultado del ejemplo 1, mientras que 8% dará como resultado una imagen ligeramente redondeada (ejemplo 2), y 0% no significara nada (ejemplo #3)
  • display y margin: harán que la imagen este un poco centrada.
  • width: Anchura de la imagen en %. 
  • border: Borde la imagen, con 1% dará el resultado de un borde como en el ejemplo 3. Para cambiar el color (#ddd) se utiliza el sistema hexadecimal de colores.
  • padding: separación del borde con la imagen,  5px utiliza en el ejemplo 3, pero si cambias el 5 por 0 (cero) el borde estará completamente "pegado a la imagen."

Otros efectos para la imagen

  • Filtros
En el caso de que lo desees dentro de .post-summary img y antes de } sumale alguno de estos códigos para agregarle filtros a las imágenes. (La propiedad de filtro no es soportada por  Internet Explorer, Edge 12, o Safari 5.1 y earlier.)

Filtros encontrados gracias a www.w3schools.com
  1. -webkit-filter: blur(4px);filter: blur(4px);
  2. -webkit-filter: brightness(250%);filter: brightness(250%);
  3. -webkit-filter: contrast(180%);filter: contrast(180%);}
  4. -webkit-filter: grayscale(100%);filter: grayscale(100%);}
  5. -webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
  6. -webkit-filter: invert(100%);filter: invert(100%);}
  7. -webkit-filter: opacity(50%);filter: opacity(50%);}
  8. -webkit-filter: saturate(7); filter: saturate(7);}
  9. -webkit-filter: sepia(100%);filter: sepia(100%);}
Bueno... ¿qué más les puedo decir,? con todo esto le darán un toque muy diferente a sus entradas destacadas... cada una de los ejemplo fueron puestos a prueba, por lo que funcionan muy bien,  espero les haya gustado el post, es uno de los tutoriales más largos que he realizado y es 100% original, la única ayudadita fue de www.w3schools.com con los grandiosos filtros.

Si quieren agregar otras características; los invito a que prueben, creen un blog de pruebas, jueguen un rato con los códigos y cuando encuentren el que más les gusten, aplíquenlo en sus blogs.  
Hasta la próxima... Muchos besos y abrazos

4 comentarios:

  1. Hola!
    Muchas gracias por el tutorial, tanto este como los anteriores, voy a ver si el fin de semana lo pruebo :)
    Saludos!
    Sol.

    ResponderEliminar
    Respuestas
    1. Es todo un placer Sol!!!
      Espero te ayuden mucho! xDD

      Eliminar
  2. Qué chulo!!
    Me gusta mucho, gracias ☺
    Besos😘😘

    ResponderEliminar