SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Personalizar pie de entradas C15

tutorial-blogger-personalizacion-pie-de-entradas

¡¡Ú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.

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.

Donde 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 mi 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.

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 :)


Si no quieres perderte nada, suscríbete y ¡Sé el primero o la primera en enterarte! 



   

2 comentarios

  1. 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!

    ResponderEliminar
    Respuestas
    1. De nada!!! me parece genial que todo te sirva de ayuda!! poco a poco es como se deben hacer las cosas para forma la idea adecuada de lo que queremos.

      Un saludo y muchas gracias!!

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.