Cómo personalizar la caja final del post en Blogger

como-personalizar-la-caja-final-de-los-posts-en-blogger

Seguimos con la serie de tutoriales para personalizar al máximo tu blog y esta semana toca la caja que aparece al final de los posts. Vas a descubrir cómo añadirle fondo, bordes, quitar o poner elementos e incluso cambiar texto por iconos. ¿Te gusta la idea? pues vamos a ello!








Normalmente las cajas de Blogger que se sitúan justo al final del post, suelen tener este aspecto:


caja-final-de-entrada-blogger


Pero podemos darle una envoltura infinitamente mejor que se ajuste completamente a la estética de nuestra marca. Y eso es lo que vamos a ver hoy: cómo pasar de la cajita sosa de Blogger a algo que se parezca más a esto:


personalizar-la-caja-final-de-los-posts-en-blogger





Antes de entrar en faena, vete a Diseño y clica en Editar en la parte de las entradas. En esta imagen, puedes ver dónde está, si lo prefieres también puedes ver el vídeotutorial que he preparado un poco más abajo:


personalizar-la-caja-final-de-las-entradas-en-blogger



Te saldrá la cajita que aparece a la derecha en la imagen, donde te he señalado los elementos que corresponden a la caja final de las entradas. Puedes escoger o deseleccionar a tu antojo, pero te explico una por una, por si lo necesitas:


1. Puedes elegir si quieres que aparezca el nombre del autor de la entrada o no. Si te fijas, también puedes cambiar la palabra Publicado por por el mensaje que prefieras.

2. También podrás escoger si quieres que aparezca la hora.

3. Si no quieres que aparezca ninguna información sobre el número de comentarios, puedes deseleccionar la casilla. También puedes cambiar la palabra comentarios por lo que prefieras.

4. Aquí tienes la opción de que se muestren o no las etiquetas del post.

5. También puedes incorporar el gadget de reacciones, para saber qué les ha parecido tu artículo a los lectores.

6. Aquí puedes marcar que no aparezca el icono de edición rápida. Este icono es un acceso directo al editor de entradas de Blogger, pero la verdad es que no cuesta nada entrar a editar a través del panel y este icono es bastante feote, aunque sólo lo verás tú.

7. Aquí puedes hacer uso de los botones sociales para que compartan tus entradas, pero como a mí los que trae Blogger no me gustan nada, he escogido que no se muestren para instalar un código personalizado en la plantilla. Si quieres saber cómo hacerlo, mírate el post Cómo poner imágenes o iconos en los botones de compartir bajo el post .

8. También puedes permitir que se muestre la ubicación desde donde escribes.


De todas las opciones, yo he escogido que se muestren solamente 2: los comentarios y las etiquetas.
Y ahora es cuando llega el momento de personalizar el footer del post. Lo mejor es que sigas paso a paso el vídeo para que no te líes. Bajo el tutorial, tienes todos los códigos que necesitas, verás que fácil es. ¿Lista? dale al play!





CÓMO PERSONALIZAR EL FOOTER DEL POST EN BLOGGER 



 Lo primero que vamos a hacer es irnos al diseñador de plantillas de Blogger porque desde allí podemos hacer ajustes muy interesantes. Para ello clic en Plantilla>Personalizar.

 Una vez dentro, elegiremos la opción Avanzado y en Texto de la página (que es la 1ª opción que nos aparece) podremos escoger la tipografía, el color y el tamaño del texto. Ten cuidado con estos ajustes, porque van a influir también en el texto del post. Si quieres que estos ajustes, sólo se apliquen en la caja del post, sin afectar al texto, tendrás que hacerlo a través de un CSS específico para esta zona, pero eso lo veremos más tarde.

 Vamos a irnos un poco más abajo, donde pone Pie de página de la entrada . Aquí podremos escoger el color del texto, el color del fondo de la caja e incluso el color de la sombra. Si no quieres sombra, ponla en transparente y listo.

 Si no te gusta el color del texto de los enlaces, lo puedes solucionar un poco más arriba, donde pone Enlaces.



AÑADIR BORDE A LA CAJA FINAL DE LAS ENTRADAS DE BLOGGER



 Una vez que estamos contenta con el resultado, quedaría añadir un borde a la caja si nos gusta. Para ello, nos vamos a Plantilla>editar HTML (recuerda hacer una copia de seguridad primero) . Este paso, podríamos haberlo hecho desde el mismo editor en el que nos encontrábamos, pero a mí me gusta que los códigos CSS queden ordenaditos en la plantilla, porque si no, cuando quieras encontrar algo puedes volverte loca.

 Una vez dentro, clica en cualquier sitio dentro de la plantilla y pulsa a la vez Ctrl+F para que salga el cuadro de búsqueda. Pega este código y dale a intro: post-footer

 En el código que nos encontramos, vamos a añadir la siguiente línea. Si tienes dudas sobre cómo cambiar los valores en azul, para personalizarlo a tu gusto, mira el vídeo que tienes arriba:

border: 2px solid #becfe7;



Y este sería el resultado:

poner-borde-a-la-caja-final-de-las-entradas-de-blogger


Aquí tienes los distintos tipos de líneas que puedes escoger para tu CSS: solid, dashed, dotted, double, ridge,groove. En la imagen aparecen en el orden en el que te los he dejado:


REDONDEAR EL BORDE DE LA CAJA DEL FOOTER DEL POST EN BLOGGER




 Para que los bordes queden redondeados, tendrias que añadir otro código bajo el anterior y cambiar el valor según la intensidad de redondeo que prefieras:

border-radius: 20px;



Quedaría así:

redondear-el-borde-de-la-caja-del-footer-del-post-en-blogger




AÑADIR DIFERENTES BORDES A LA CAJA FINAL DE LAS ENTRADAS EN BLOGGER




 Otra opción es elegir la apariencia del borde por separado y cambiar tipos de líneas, grosores y colores al gusto:



border-top: 2px solid #becfe7;

border-left: 4px ridge #becfe7;

border-right: 4px groove #becfe7;

border-bottom: 2px solid #becfe7;



Por ejemplo, así:



poner-diferentes-bordes-a-la-caja-final-de-las-entradas-en-blogger




CAMBIAR EL TEXTO DE ETIQUETAS EN BLOGGER POR ICONOS



¿Te ha gustado? pues ahí no queda la cosa, si has optado por aplicar los ajustes de tipografía, color y tamaño, sin afectar al texto del post, ahora toca ver cómo aplicarlos mediante CSS. Además, puedes cambiar el texto de las etiquetas por iconos, como te muestro en esta imagen.




cambiar-el-texto-de-etiquetas-en-blogger-por-iconos






CAMBIAR COLOR, TAMAÑO Y TIPOGRAFÍA CON CSS




Aquí tienes el enlace a Google Fonts , que te hará falta si quieres cambiar el tipo de fuente.


  • Para que los ajustes no afecten al texto del post, entramos en Plantilla>Editar HTML y en la sección CSS de los posts, vamos a añadir este código:

.post-labels {
font-family: 'Philosopher', sans-serif;
font-size: 14px;
color: #424242;
}
.comment-link {
font-family: 'Philosopher', sans-serif;
font-size: 14px;
color: #424242;
}


Cambiamos al gusto y guardamos. Mira el vídeo que te he dejado más arriba si tienes dudas.



CAMBIAR ENLACE DE ETIQUETAS POR ICONOS






Para usar iconos, debes tener instalada la cartera de Font Awesome. En este post, ya te explique como hacerlo en menos de 1 minuto.


  • Una vez instalada, tendrás que elegir si quieres el icono de una sola etiqueta o de doble etiqueta. Dirígete a la página de Font Awesome y mira el vídeo para saber cómo localizarlas.

  • Ahora es el momento de irse a Tema>Editar HTML y hacer clic dentro para pulsar a la vez Ctrl+F y que nos salga la caja de búsqueda, en la que vamos a pegar lo siguiente, para buscarlo: <data:postLabelsLabel/>

  • El código nos aparecerá seleccionado en amarillo y ahora tan sólo tendremos que copiar la etiqueta de Font Awesome que hayamos elegido y pegarla allí para sustituir ese código.

  • Si queremos personalizar el color y el tamaño, habrá que dirigirse a la parte CSS de la plantilla, en concreto a la sección del Post y pegar este código:


.post-labels i{
font-size: 16px;
color: #C389A2;
}
  • En el que cambiaremos lo marcado en azul, según nuestras necesidades.


Guardamos y listo. Así de fácil es personalizar nuestro footer del post, para darle un aspecto atractivo y ajustado a nuestra marca.

Espero que hayas difrutado mucho del tutorial y si te animas a hacer el cambio, me encantaría que me dejaras el link a tu blog, para pasarme a echar un vistazo.

Que tengas un gran día!





¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:





Comentarios

  1. He tocado alguna cosilla de la plantilla pero creo que ahí no he enredado, investigaré un poquillo ^^
    Acabo de leer tu comentario y no sé si mal o bien, pero el Photoscape es el programa que utilizo desde hace años jeje
    Bss.

    ResponderEliminar
  2. ¡Hola!
    Vamos, vamos, vamos, esos post chulos y útiles para darle un buen lavado de imagen a mi blog.
    Este junio, espero poder empezar con las reformas, y claro está quiero poner unos iconos como estos al final del post, por que los veo muy útiles. Vamos, visualmente atraen más que los que traen de por sí blooguer.
    Y esto es como en todo, si entra por la vista, tiene medio camino hecho ^_^
    Muchas gracias, de nuevo, por estos tutos. Me vas ahorrar un montón de tiempo y comederos de cabeza. A ver si cuando los ponga en práctica, me salen a la primera (que esta es otra jajajaja)
    Besos guapi ^_^

    ResponderEliminar
  3. Muchisimas gracias por este tipo de entradas y videos, siempre ando de cabeza con blogger y no siempre encuentro la ayuda que necesito. Muchas gracias guapa, un saludo. Maquillando Sueños

    ResponderEliminar
    Respuestas
    1. Pues para personalizar el blog aquí vas a encontrar muchos tutoriales, espero que te sirvan Elo, en cuanto pueda me paso a echarle un vistazo a tu blog, un beso!

      Eliminar
  4. tu post me a venido perfecto, queria saber como cambiarlo y la verdad esque nunca encontraba nada y de repente apareces!! tengo que decir que he guardado la pagina para hacerlo cuando tenga tiempo porque me pilla liada :S , espero que me resulte facil aunque lo que he visto paso a paso y despacio creo que podre :D Un besito grande MUAK

    ResponderEliminar
    Respuestas
    1. Es muy fácil Ire, con el vídeo seguro que no te pierdes :) Me alegro que te haya venido bien, un beso!

      Eliminar
  5. Siempre traes un montón de info interesante sobre cómo modificar nuestros blog. Esta vez a mí no me vale, porque uso WP.org, pero la verdad es que tu entrada está super detallada y es complicado perderse! Saludos! ;)

    ResponderEliminar
    Respuestas
    1. Ahora me estoy pasando a Wordpress Pilar, así que espero de aquí a un tiempo, poder daros consejos de diseño allí. Un saludo!

      Eliminar
  6. Que utiles son tus post!!! El dia que me ponga a darle un cambio a mi blog y aplique tus consejos va a ser la bomba!!!!

    ResponderEliminar
    Respuestas
    1. Pues anímate Ainoa, que el aspecto es muy importante a la hora de convencer a las visitas para que vuelvan. Además, te aseguro que te lo pasarás pipa con la personalización ;) un saludo!

      Eliminar
  7. Por descontado que voy a probar, como yo soy torpísima es una amiga la que me hace estas cosas asi que con su ayuda voya mejorar el footer que tengo el típico soso. Por cierto no sabía que se llamaba así. Muchas gracias por molestarte tanto entre el video y el post, me queda precioso segura, ya te contaré, bss
    walkingtopennylane

    ResponderEliminar
    Respuestas
    1. Ya me pasaré a verlo Penny, seguro que sí, un besote!

      Eliminar
  8. Raquel me encantan tus entradas, soy super fan enserio, soy parte de la comunidad de hecho y estoy encantada, como ya me comentaste en mi blog he puesto estos y bueno super bien con tu ayuda enserio que me encanta como haces todo y como te dedicas a ello, muchas gracias guapa y tendre en cuenta lo de la version movil y en cuanto pueda lo hago! Mil besos😚

    ResponderEliminar
    Respuestas
    1. Gracias a ti Catalina por pasarte a decirme que te ayudan mis entradas, no sabes la alegría que me da resultaros de ayuda. Yo también soy super fan de tus imágenes en Instagram y me vienen genial tus propuestas de estilo. Claro que sí, en cuanto termine la serie de tutoriales para personalizar el blog, haré un especial para que los suscriptores podais personalizar la plantilla móvil, así que te va a venir genial estar en la comunidad. Un besote gordo!

      Eliminar
  9. Haciendo esto es donde no veo cambios ninguno, vamos que no se cambia nada, qué raro...

    ResponderEliminar
  10. Hola¡ me encanto el tutorial pero tengo un probema, yo quise dejar la fecha pero resulta que el cuadro de la caja tambien me aparece ahi, ¿hay alguna forma para que solo me quede la edicion solo en la caja de comentarios y no en la fecha?

    ResponderEliminar

Publicar un comentario