Cómo editar el tamaño de la cabecera en Blogger (En 8 Pasos)

Por nicole thomas
Cómo editar el tamaño de la cabecera en Blogger (En 8 Pasos)
Thinkstock Images/Comstock/Getty Images

Blogger es una de las muchas plataformas de blogs donde los usuarios pueden modificar los colores del diseño, el tamaño e incluso su imagen de cabecera. La imagen de cabecera de cualquier sitio se convierte en una marca. Al igual que un logo en una tarjeta de visita, esta cabecera hace que los visitantes asocien determinados servicios o contenidos con los gráficos. Aunque los usuarios pueden subir cabeceras de cualquier tamaño, sólo una parte de la imagen aparecerá en Blogger, a menos que el usuario cambie el tamaño de su gráfico o las dimensiones de su plantilla en el editor HTML. Para cambiar el tamaño de la cabecera en Blogger, los usuarios deben cambiar el código HTML y CSS.

Paso 1

Accede a Blogger con tu dirección de Gmail y la contraseña. Selecciona el blog que deseas editar de la lista de blogs.

Paso 2

Haz clic en "Editar HTML" en la parte superior de la pantalla para acceder al editor HTML. Aquí es donde vas a realizar los cambios. Haz una copia de seguridad de la plantilla antes de hacer cambios y haz clic en "Descargar plantilla completa" en la parte superior de la pantalla. Guárdala en un lugar seguro, como tu carpeta "Descargas" o "Escritorio".

Paso 3

Mantén presionada la tecla "Ctrl" y la tecla "F" en tu teclado para abrir el campo de búsqueda. Busca "Header-wrapper" y haz clic en el botón "Siguiente". Blogger destacará las palabras en verde para facilitar el acceso. Dependiendo del diseño de Blogger que estás usando, tu código de "Head-wrapper" puede verse como esto:

header-wrapper {

background:#ffffff url(http://imageaddress); height:375px; width:1000px; margin:0 auto 0px; border:0px solid $bordercolor; }

Paso 4

Ten en cuenta que el "Header-wrapper" tiene una altura y una anchura. Cambia la altura y anchura para que coincida con el tamaño de tu cabecera. Así que si tu cabecera es de 900 píxeles de ancho y 200 píxeles de alto, cambia el código en consecuencia.

Paso 5

Guarda los cambios y revisa tu sitio. Observa y ve si tu cabecera es más pequeña que el exterior de tu diseño o si aún es demasiado grande. Si eres feliz con su aspecto, puedes ignorar el siguiente paso.

Paso 6

Vuelve a la "Edición de HTML" de tu diseño y haz una búsqueda de “Outer-wrapper”. Deberías ver algo como esto:

outer-wrapper {

width: 1000px; margin:0 auto; padding:0px; border: 2px solid #696CB3; background:#E6ECF7; text-align:$startSide; font: $bodyfont; }

Paso 7

Asegúrate de que el ancho de la "Outer-wrapper" coincida con el de tu cabecera si quieres un ajuste perfecto. Haz que el ancho de tu "Outer-wrapper" sea 900 píxeles si la imagen de la cabecera es de 900 píxeles de ancho. Cambia la altura de tu "Out-wrapper" si la parte inferior de la cabecera sigue desapareciendo a causa de la barra de navegación o el contenido principal de tu blog.

Paso 8

Guarda los cambios y revisa tu blog. Asegúrate de que las cosas se alineen correctamente antes de continuar. Carga la plantilla que guardaste antes si no estás satisfecho con los cambios; de lo contrario, guarda la plantilla de nuevo por si es necesario realizar cambios en el código HTML después.