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:

  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

.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

.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

.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

MI LIBRO

TU PROPIO ÉXITO

DESARROLLO PERSONAL Y BRANDING

Consigue tu ejemplar con ejercicios e ilustraciones.

4 3 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments