8 jul. 2016

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

  • 8:00
  • por
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! 



Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 12 veces:

  1. Anónimo10/26/2016

    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
  2. Podría dejar el código que genera con sharethis porque ahora no permite seleccionar Blogger, le estaré muy agradecido Señorita :)

    ResponderEliminar
    Respuestas
    1. Hola yo he hecho tutorial con Add to any , no con Share This,tienes el enlace en este mismo post
      Un saludo! gracias

      Eliminar
  3. 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! >-<

    ResponderEliminar
    Respuestas
    1. OOh, acabo de darme cuenta de que estaba sin contestar tu comentario. ¡Muchas gracias! me hace mucha ilusión, de eso se trata , de aprender!!
      muack!!

      Eliminar
  4. Anónimo12/10/2017

    ¡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

    ResponderEliminar
    Respuestas
    1. Hola! todavía no tengo tutorial para eso, poco a poco añadiré más tutoriales interesantes.
      Gracias!

      Eliminar
  5. ¡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.

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

      Eliminar
    2. 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.

      Eliminar
    3. 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!!

      Eliminar