02 junio 2016

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






¿Quieres saber cómo? pues todo esto te lo cuento en el blog privado, porque hoy toca contenido exclusivo para la Comunidad Demo 2.0, así que lo reservo para los que forman parte de ella. Si quieres unirte, lo puedes hacer desde el botón que tienes a continuación. Es completamente gratis y tiene muchas ventajas, no te las pierdas!








Descubre cómo personalizar el footer del post en Blogger.Incluye videotutorial Tuitéalo



Como ves no es nada difícil personalizar nuestro footer del post, para darle un aspecto atractivo y ajustado a nuestra marca. Ahora me encantaría que me contaras qué te ha parecido ¿ya tenías personalizado el tuyo? ¿qué elementos consideras importantes en la caja final de las entradas? ¿alguna duda o sugerencia que quieras hacerme? no te cortes, te espero en los comentarios.



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:





33 comentarios:

  1. ¡Muchas gracias! Recuerdo que hace poquito te pregunté por un post de este tipo y me alegra que por fin lo hayas hecho :)
    Es un resultado super simple pero que hace un gran cambio con el original, ¡me encanta!

    ResponderEliminar
    Respuestas
    1. Gracias a ti Daiana por proponérmelo, sois el motivo de mis contenidos así que vuestras sugerencias son bienvenidas siempre. Me alegra que te haya gustado, un besote!

      Eliminar
  2. Al final intenté ponerla simplemente para ver el efecto, pero no se porqué no sale, asi que así se queda, pero como siempre muchas gracias por estos truquitos para mejorar el blog, ¡qué sería mi blog sin muchos de tus detalles!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Raude, si me cuentas que es lo que no te sale, te ayudo, que seguro que tiene un porqué. Yo estoy encantada de que te sirvan mis tutoriales, un abrazo!

      Eliminar
    2. Muchas gracias Raude, si me cuentas que es lo que no te sale, te ayudo, que seguro que tiene un porqué. Yo estoy encantada de que te sirvan mis tutoriales, un abrazo!

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. La caja! que mi blog no quiere enmarcar mi footer jajajaja, no me digas porqué, tampoco tiene demasiada importancia, sólo me puse a hacerlo como ejercicio didáctico y ver que tal quedaba. Soy capaz de seguirte de "p a pa" videos enteros de 45 minutos y cambiar todo el gadget para adaptarlo a mi blog y no soy capaz de poner una cajita al footer y encima haciendo lo mismo que tú y en el mismo sitio, pero la caja no quiere aparecer... XD, abrazo de vuelta..

      Eliminar
    5. Es muy raro Raude, yo he estado probando en tu blog y lo he hecho sin problemas, se lo tienes que añadir al Css del post-footer como te indico en la imagen http://i66.tinypic.com/23h3mhg.jpg . Pero dentro de tu plantilla, claro está, porque desde donde yo lo hago es modificación temporal para probar.

      Eliminar
  3. 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
    Respuestas
    1. Puede que no hayas tocado las opciones de brillo y saturación. Si puedes mirartelo cuando tengas un rato quizás encuentres la manera de sacarle más partido. Un beso Paula.

      Eliminar
  4. ¡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
    Respuestas
    1. Seguro que sí, avisame cuando lo hagas Carolina, me hace ilusión verlo. Un besote!

      Eliminar
  5. 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
  6. Lo tendría que leer diez veces para entender alguna cosa, lo siento per es como si estuviera en otro idioma, no pillo ni torta pero algún día quizás empiece ha hacer pruebas que falta le hace a mi blog algunos cambios

    ResponderEliminar
    Respuestas
    1. No te fuerces, cuando algo no entra, es porque en ese momento no tenemos verdadero interés por ello. A mí me costó muchísimo entender el HTML y el CSS pero insistí, porque ahora algo que de verdad me interesaba averiguar. La vida es cuestión de prioridades, si en este momento no es importante para ti, no tienes por qué intentarlo. De todas maneras, te agradezco que te pases y comentes Divinas, un saludo!

      Eliminar
  7. 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
  8. 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
  9. 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
  10. Uixxx esto es genial , mira que estaba pensando cambiar esa zona, y no sabia como hacerlo. Voy a hacerlo haber que tal me sale ^.^

    ResponderEliminar
    Respuestas
    1. Seguro que te sale genial, pero si tienes alguna duda, avísame ;) besos!

      Eliminar
  11. Muy util este articulo!! es mas, creo qeu voy a implementarlo y asi le doy un tque mas personalizado a mi blog. Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Darle nuestro toque es fundamental para que tenga personalidad, avísame cuando lo hagas, me encanta ver los cambios y como suelo leeros por el móvil, ahí no lo veo. Por cierto, muy buenos tus contenidos Etna, felicidades, un beso!

      Eliminar
  12. 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
  13. 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
  14. Haciendo esto es donde no veo cambios ninguno, vamos que no se cambia nada, qué raro...

    ResponderEliminar
  15. 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
    Respuestas
    1. Hola Jayet, quizás es que no has pegado el código en el segundo (div class post footer) te lo pongo así, porque Blogger no deja escribir HTML aquí en los comentarios. Prueba a buscar: post-footer
      Así, tal cual y le das a intro hasta que encuentres el 2º código div class post footer y ahí lo pegas y eliminas el que hubieras pegado anteriormente. De esta manera, afectará sólo a la caja de comentarios y no a la fecha.
      Espero que con eso lo soluciones, un saludo!

      Eliminar

demo