julio 22, 2014

Tutorial: Centrar la cabecera de tu blog


¡Aló, mis queridos amigos! Hace tiempo que les debo una entrada de estas y Emmanuel me ha dado la inspiración para el tutorial del día de hoy. Yo sé que a veces todos peleamos mucho con los códigos HTML, pero hay una forma fácil y sencilla de centrar la cabecera de nuestros blogs sin siquiera tener que tocar el código ese. Por default, Blogger siempre nos va a poner la cabecera del lado izquierdo, pero ya les muestro cómo podemos centrarla para que todo se vea más limpio y ordenado.

En la página principal del editor del blog, nos vamos a la penúltima opción Plantilla y de ahí damos clic en Personalizar.
Una vez en el Diseñador de plantillas, buscamos la última opción del menú del lado izquierdo Avanzado y en la barra que aparece a su izquierda, también vamos a la última opción Añadir CSS. Nos debe aparecer un cuadro blanco, ahí es donde agregaremos el comando para que nuestra cabecera se centre.
El código que hay que agregar es este:
.header .widget {
text-align:center;}
.header img {margin:0 auto;}
Por la configuración que tengo aquí en el blog lo más seguro es que les salga una leyenda y un link. Borren eso y que quede el código solo. Automáticamente, en la parte de abajo debe aparecer la vista preliminar de su blog, si todo está como nos gusta le damos al botón de la parte superior derecha Aplicar al blog y cerramos la ventana.

No debe haber mayor problema con este tutorial. Si su cabecera no se centra, va a ser porque la configuración de sus planillas no lo permite. Pero de cualquier forma, ya saben que estoy aquí para cualquier duda que tengan. :)

Nota especial: Si ustedes, como yo, tienen una imagen mapeada en sus cabeceras, probablemente no sirva de nada este tutorial, porque es una configuración que se hace a los gadgets que ya traen las plantillas. En este caso, es mucho más sencillo centrar la imagen de cabecera, simplemente hay que entrar al gadget donde tenemos el código de la imagen mapeada y antes y después del código HTML hay que pegar <center> (antes) y </center> (después).

8 comentarios:

  1. Está genial este tutorial, la verdad que se agradecen, sobre todo para aquellas personas que no somos muy diestros con los códigos jeje.

    Un besiño

    ResponderEliminar
  2. Hoola!!
    Muchas gracias por el tutoria!!
    Besoos<3

    ResponderEliminar
  3. aiiss muchas gracias, me estaba volviendo loca buscando como hacerlo xdd
    Muchas Gracias <3

    ResponderEliminar
  4. Muchas Gracias por el tutorial, me ayudaste mucho. Besos

    ResponderEliminar
  5. Hola! me gusto tu tutorial :) pero no entendi lo de la imagen mapeada, ¿me podrias explicar? graciass ¡besos!

    ResponderEliminar
    Respuestas
    1. Claro. :) Una imagen mapeada es como la que tengo ahora de cabecera, dentro de la misma imagen hay insertas unas ligas en espacios específicos, en mi caso, las de las páginas del blog. Como esta clase de cabeceras se agrega de forma diferente a la plantilla, se centran de forma diferente también. :) Puedes ver mi tutorial para mapear imágenes aquí: http://librosentremundos.blogspot.mx/2014/01/como-agregar-una-imagen-con-botones-en.html
      Espero haber ayudado, me avisas. :)

      Eliminar
    2. Ahora entiendo todo, si habia visto eso en varios blogs además del tuyo y yo me preguntaba ¿como lo hacen? o.o, a mi la barra que trae blogger no me gusta mucho, así que intentare el mapeo para mejorar la cabecera,pero lo hare cuando tengo mucho tiempo y paciencia xD no soy buena editando imagenes u.u muchas graciass.

      Eliminar

Hola, querido unicornio lector.
Este es un espacio para la libre expresión, nunca temas expresar lo que piensas. Una regla: aquí se prohibe el spam. :)
¡Felices lecturas y gracias por dejarme tu opinión!

 
Libros entre mundos. Design by Marloz