personalizar pie de entradas blogger tutorial

Cómo Personalizar pie de entradas en tu blog Blogger Tutorial

personalizar pie de entradas blogger tutorial

¡¡Última clase!! Qué contenta estoy de que este curso llegue a su fin, porque significa que ya tienes tu blog como deseas, dentro de lo básico. Además ha resultado un éxito, muchísimas personas me habéis dado las gracias de una u otra forma y no puedo sentirme más satisfecha.

Veo muchos proyectos interesantes y eso me alegra. Pero también, por otro lado siento que podríais estar emprendiendo como yo y llevando el estilo de vida que más os guste. Un estilo de vida basado en lo que amas hacer.

Si esto no es solo un hobbie para ti de verdad contacta con nosotras y pide tu primera reunión gratuita si estás dispuesta a emprender. ¡Te esperamos!

Bueno, queda una última clase, bastante importante y especial, porque es otro detalle más que hará que tu blog sea original y único; el pié de las entradas de tu blog.  

Dónde podemos encontrar las etiquetas, las redes sociales donde tus lectores/as podrán compartir el post, comentar, y también pega el corte a un nuevo post.  

Para mí es una parte muy importante, el pié de post es clave.  

Piensa que a través de él tus lectores/as van a compartir tus entradas en sus redes sociales y también van a comentar. Tendrá que ser limpio y atractivo para invitar a estas acciones tan importantes para que tu blog crezca en visitas y en interacción, dos detalles muy importantes para mejorar el SEO de tu blog y, por supuesto, el crecimiento en general del mismo.  

Personalizar pie de entradas de blog en Blogger

Este tutorial es algo largo, porque vamos a modificar por partes el pie de página, ya que debemos darle unas características diferentes a cada parte.  

1- Lo primero que haremos será ir a nuestro blog, a Diseño

2- En la parte de Main/Entradas del blog vamos a hacer click en Editar

3- Elegimos las características que queramos y en la parte de Etiquetas: borramos eso y ponemos

 

para que no nos salga nada. Pero si queremos llamarle Categorías lo ponemos.

Las opciones que yo he elegido son estas:

personalizar-pie-entradas-tutorial-blogger

  4- Una vez que lo tenemos le damos a Guardar.  

Modificar estilo de etiquetas en el pie de entradas

Para modificar las etiquetas en nuestro pie de página es muy sencillo, solamente tenemos que añadir a nuestro CSS el estilo que queramos.   

Comparto un par de posibilidades de estilo para que elijas el que más te guste y mejor se adapte a tu blog.  

Como siempre, puedes cambiar las propiedades de estilo que consideres, los colores por los de tu paleta de colores del blog, el tipo de letra (si quieres añadir nuevos tipos de letra mira este post) y todos los detalles que quieras.  

Copia y pega en un bloc de notas de tu PC y modifícalo a tu gusto, para luego pegarlo en tu plantilla. Después de los códigos te explico cómo.


Estilo de etiquetas dentro de un marco

personalizar-etiquetas-pie-entradas-tutorial-blogger
.post-labels {border: 1px solid #8fb59e;/* borde del cuadro*/padding: 5px; /*espacio que separa las estiquetas del recuadro*/letter-spacing: 3px; /*separación entre caracteres*/font-family: 'Open Sans' , sans-serif;/*tipo de letra*/font-size: 10px;/*tamaño de letra*/text-transform: uppercase;/*todo mayúsculas, borra si no quieres*/text-align: center;/*etiquetas centradas en el post*/display: block; /* tan ancho como la entrada*/}

Estilo de etiquetas con fondo de color

personalizar-etiquetas-tutorial-blogger
.post-labels {background: #ddd; /*color de fondo*/padding: 5px;/*espacio que separa las estiquetas del recuadro*/
letter-spacing: 3px;/*separación entre caracteres*/
font-family: 'Open Sans' , sans-serif;/*tipo de letra*/
font-size: 10px;/*tamaño de letra*/
text-transform: uppercase;/*todo mayúsculas, borra si no quieres*/
text-align: center;/*etiquetas centradas en el post*/
display: block;/* tan ancho como la entrada*/
}

Estilo de etiquetas minimalista

personalizar-etiquetas-tutorial-blogger-sin-borde-ni-fondo
.post-labels {padding: 5px;/*espacio que separa las estiquetas del resto*/
letter-spacing: 3px;/*separación entre caracteres*/
font-family: 'Open Sans' , sans-serif;/*tipo de letra*/
font-size: 10px;/*tamaño de letra*/
text-transform: uppercase;/*todo mayúsculas, borra si no quieres*/
text-align: center;/*etiquetas centradas en el post*/
display: block;/* tan ancho como la entrada*/
}

Ya tenemos nuestras etiquetas personalizadas. Ahora vamos a pegar este código en nuestra plantilla para que el estilo surja efecto.

1- Vamos a Plantilla
2- Copia de seguridad
3- Editar HTML
4- Buscamos el siguiente código en nuestra plantilla (si no sabes cómo mira este vídeo)

/b:skin>

Si ya está desplegado genial, pero si le preceden unos puntitos azules, tal que así:

<b:skin>...</b:skin>

5- Entonces le damos a los puntitos y volvemos a buscar ese mismo código que buscamos antes.

6- Justo encima de ]]></b:skin> pegamos el código personalizado de nuestras etiquetas.

7- Guardamos y listo!!


Añadir iconos de redes sociales en el pie de entradas

Existen varias formas de añadir nuestros iconos de redes sociales para compartir, pero en esta clase te enseñaré la más original.

Para esta parte ya tengo un post, o más bien dos, donde te explico paso a paso cómo puedes crear tus iconos e instalarlos.

La página que vamos a usar, que nos proporciona el código es Add to any y os envío directamente al post de Instala tus iconos/botones diseñados de rrss

Pero dejo por aquí también el vídeo de esta clase al completo para que puedas realizar toda la personalización sin mayor problema.

Espero que te haya gustado. Si tienes dudas las espero en mi e-mail de contacto o bien aquí en comentarios 🙂

Aquí tienes el fin de curso, no te lo pierdas 😉

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

17 comentarios

  1. Anónimo

    Ya la última clase…
    En lo personal debo admitir que aún no he terminado mi blog, pero he leído todas las entradas que publicaste del curso y estoy formando una idea sobre el diseño que quiero que tenga mi blog!

    Muchas gracias por todo!

  2. Synfonia

    Muchísimas gracias por todo el contenido que tienes en tu Blog, estoy creando uno para poder hacer conocer mi tienda de Amigurumis y gracias a ti puedo hacer todo lo que siempre he querido para mi blog xD de hecho he aprendido bastante de cosas que antes veía y me parecían que estaban en chino! >-<

  3. Anónimo

    ¡Hola Monica! Como puedo colocar ese slider o desplazable como tienes tú en la página principal de este blog? Me puedes decir o pasarme el tutorial? Gracias de antemano

  4. Jorge Aranjuez i Vilanova

    ¡Hola!
    Estoy a vueltas con esto del blog y me he encallado en los enlaces de las redes sociales al final de cada entrada, para compartir. Hago todo lo que los tutoriales indican, pero no sale nada.
    ¿Será que no se puede eliminar el cuarto enlace, el del signo +? Solo he puesto los de Facebook, Twitter y Google plus. El otro lo he eliminado.
    Tampoco me queda claro si se ha de incluir el script de la última linea.
    El resto del curso me va la mar de bien (mejor de lo que esperaba) y me está quedando un blog bastante majete. Cuando esté acabado, te daré la dirección para que lo veas.
    Saludos.

    • Mónica Lemos

      El script de la última línea es crucial para que funcione Jorge, y la del +, prueba a dejarla a versi así te salen.
      mucho ánimo, estas cosas pasa cuando se nos pone delante un nuevo lenguaje que desconocemos!! pero es algo hermoso!! por cierto, revisa tu página de facebook y demás, cuando compartes tu blog o web no aparece nada… no encuentro tu blog por ninguna parte!! hazlo visible!!
      Ánimo!!

    • Jorge Aranjuez i Vilanova

      Hola.
      Al final conseguí colocar los dichosos enlaces, no los personalizados porque no me salía la imagen (aparecía una cosa rara en su lugar) sino uno de los otros. El inconveniente, ya lo mencionas tú en el curso, es que comparten la página entera en lugar de solo la entrada. Una vez probado, no me ha gustado el resultado y los he eliminado. Así pues, de momento, funciono con los que proporciona Blogger. Son feotes, pero… ¡Qué se le va a hacer!
      En cuanto al blog, no lo busques mediante Google o cualquier otro buscador; no lo vas a encontrar. Supongo que todavía es demasiado joven y "poquita cosa" para que lo tengan en cuenta. Para verlo has de escribir la dirección en la barra del navegador o acceder mediante un enlace; prueba con el de mi perfil de Twitter ( @AranjuezivilaN ).
      Gracias por tu dedicación.

    • Mónica Lemos

      Hola Jorge, jaja qué simpático! para todo hay un inicio, el proceso puede ser bonito, aunque en tu caso lo mejor sería centrarse en lo tuyo, ¡Escribir! He visto que has hecho grandes cambios, sigue así. Si quieres dar el salto ya sabes, contacta conmigo y trabajamos una plantilla comoda para ti elegante.
      Un saludo!!

  5. Jesús Ramírez

    Hola!
    Antes de nada, muchísimas gracias por todos los consejos y tutoriales 🙂 Aprovecho esta entrada sobre el diseño de las etiquetas para hacerte una pregunta. Por más que selecciono que se muestren las etiquetas en Diseño>Entradas, no me aparecen ni en la página principal ni en la url de la entrada en sí. No encuentro ninguna solución por google, ¿tienes idea de cómo puedo solucionarlo?

  6. CineClasico

    Cuando la plantilla es una descargada de internet, por su estructura es un poco más complejo en ocasiones, como me ha ocurrido a mi, pero aun así el artículo es muy orientativo y me ha ayudado mucho para dar con las secciones a editar. Muchas gracias Mónica.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *