Personalizar a tu gusto el nuevo gadget "Entrada destacada" de Blogger

22.12.15

personalizar gadget entradas destacadas

Ya sabes que Google ha puesto a tu disposición un nuevo gadget "Entrada destacada" para Blogger.

Pero la siguiente pregunta (que seguro te ha pasado por la cabeza al cabo de muy poco) es: ¿se puede personalizar un poco?

Claro que sí! Como siempre!

Tal y como ya sabes, el gadget tiene básicamente tres partes que podrás personalizar:

  • el título de la entrada destacada.
  • las primeras líneas de texto del post.
  • la foto.

Aprenderás con un ejemplo los cambios que puedes hacer.

Así es como se ve al principio, sin personalización el gadget de entrada destacada. (en mi blog de pruebas, en tu blog será distinto).


gadget entrada destacada



Cualquiera de los cambios que quieras realizar en el gadget de entrada destacada, lo harás añadiendo código CSS a tu blog.


Para hacerlo tendrás que seguir los pasos siguientes:

  1. Entra en Plantilla del menú lateral izquierdo de Blogger.

    personalizar entrada destacada

  2. Pincha en Personalizar

    estilo css entrada destacada

  3. Accede a Avanzado y luego a Añadir CSS.

    poner estilo entrada destacada


  4. En el recuadro blanco deberás añadir el código CSS de los apartados siguientes, correspondientes a lo que quieras personalizar de tu gadget de entrada destacada.




Personalizar el título de la entrada destacada

Las características del título son las mismas que los títulos h3 que tienes definidos en tu blog, pero esto no quiere decir que no lo puedas variar.

El título es también un enlace y puedes definir dos estilos diferentes (si quieres): uno para cuando el link no ha sido visitado y otro para cuando el lector ya ha entrado en él.


gadget personalizar entrada destacada


En el caso de que quieras que siempre se vea igual, simplemente tendrás que poner el mismo código en los dos casos.

Cambiar el estilo del título antes de ser visitado


Puedes cambiar el color del título, la fuente y el tamaño de esta.

 

  .post-summary a {

     color:#0C762E !important;

     font-size: 130%;

     font-family: 'Lora', serif;

  }



color --> hace referencia al color del título. Lo puedes poner en el sistema hexadecimal de los colores.

font-size --> es el tamaño de la fuentes. En porcentajes el 100% representa el tamaño de la fuente que ya tienes y si aumentas el porcentaje va aumentando el tamaño.

font-family --> tienes la oportunidad de cambiar el tipo de letra. En Google Fonts tienes cientos de fuentes para escoger.


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


Aquí puedes cambiar exactamente los mismos elementos que en el caso anterior.

Recuerda que si quieres que se vea igual, pon aquí las mismas características que arriba.




  .post-summary a:visited {

     color:#0C762E !important;

     font-size: 130%;

     font-family: 'Lora', serif;

  }



Para centrar el título


Simplemente añade este código que hace referencia al título.



  .post-summary h3 {

    text-align:center;
    }





Personaliza el texto de la entrada destacada

Al igual que en el caso de título, también puedes cambiar el color, el tamaño y la fuente y además puedes centrar el texto aquí mismo, sin añadir más código.


Así es como se vería.




Aquí tienes el código que debes añadir.

  
  .post-summary p{
     color: #8421A3;

     font-size: 140%;

     font-family: 'Great Vibes', cursive;

     text-align: center; 

  }



color
 --> hace referencia al color del título. Lo puedes poner en el sistema hexadecimal de los colores.

font-size --> es el tamaño de la fuentes. En porcentajes el 100% representa el tamaño de la fuente que ya tienes y si aumentas el porcentaje va aumentando el tamaño.

font-family --> tienes la oportunidad de cambiar el tipo de letra. En Google Fonts tienes cientos de fuentes para escoger.

text-align --> añade esta línea de código si quieres centrar el texto.



Eliminar el texto de la entrada destacada

A mi personalmente me sobra el texto este.

En mi caso, las primeras frases del post no son precisamente las más destacadas, y además me corta lo que escribo.

Si quieres puedes eliminar este texto y que sólo aparezca el título del post destacado y la foto.


entrada destacada imagen


Tienes que añadir este código.


  
  .post-summary p{
     display: none !important;

  }





Cambiar la foto de la entrada destacada

No sé si es tu caso, pero puede pasar que la primera foto que aparezca en tu post, no sea precisamente la que quieres poner en este gadget.


texto entrada destacada personalizar



Por defecto Blogger coge la primera foto que encuentra en el post, por lo tanto la tendrás que cambiar.



  
  .post-summary img{
     content: url('URL_DE_LA_FOTO') !important;
  }





 URL_DE_LA_FOTO --> lo tienes que sustituir por la URL de la imagen que quieras añadir aquí.




¿Ya lo habías instalado el gadget nuevo de Blogger? ¿Piensas que deberían dar la opción de personalizar sus gadgets directamente desde Blogger y sin añadir CSS?


Ufff....hoy ha sido un tutorial largo y super completo! Aquí no se resiste ni una personalización!


Si no estás en mi Newsletter (te recomiendo que te apuntes ya! Para no perderte nada de nada!) te deseo muy buenas fiestas!

La próxima semana no habrá post en el blog. Nos vemos en enero otra vez! Feliz Navidad y feliz año nuevo!

Laura

¿Te ha servido lo que has leído? Muchas gracias por compartirlo en tus redes sociales! Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.