Header Ads

Ajustar imagen de la cabecera del Blog

Tener una imagen en la cabecera de nuestro Blog, puede ser de mucho atractivo para nuestros lectores, ya que tener una cabecera impactante ara que las personas que visitan nuestro Blog, lo tomen en cuenta y tenga una mayor curiosidad por conocer nuestro contenido, Recuerden que lo primero que se observa en una Pagina Web es la cabecera. 



Añadir una imagen a nuestra cabecera en Blogger es sumamente fácil  sino saben como hacerlo pueden ver la siguiente entrada-ver entrada, pero muchas veces nuestra imagen no se acomoda como desearíamos, así que los ajustes tenemos que hacerlo nosotros mismos, en esta entrada aprenderemos a ajustar los margenes de la imagen de nuestra cabecera por medio de código CSS..

Para comenzar nos vamos a: PLANTILLA>>PERSONALIZAR>> AVANZADO >>AÑADIR CSS

Una ves que estemos en la opción de añadir css en el editor de plantillas , en la cual podemos editar la imagen por medio del código:


#header img
{
   width:800px; /* define el ancho de la imagen*/
   height:50px; /* define el alto de la imagen*/
   border: 2px solid #7ab0ca; /* se añade un borde y un color determinado al borde*/

}

Con este código accedemos directamente a la imagen de la cabecera, en este ejemplo solo colocamos un ejemplo básico, sin duda ustedes lo adecuaran según la necesidad que tengan, si conocen mas sobre CSS, pueden hacer modificaciones grandiosas a la imagen de su cabecera, ya saben la ruta de acceso la cual es
#header img


Cualquier duda o Aporte pueden hacerlo por comentarios. Gracias por su Tiempo!.









54 comentarios:

  1. A UN NO LOGRO CENTRAL LA IMAGEN,Y AÑADÍ EL CSS QUE DEJASTE EN ESTE POTS,QUE ESTOY HACIENDO MAL..

    ResponderEliminar
    Respuestas
    1. Hola YEISON, podrías decirme que código estas aplicando para el centrado de tu imagen, el width y height, son para el ancho y alto, quisiera que me brindes el código que estas usando para poder ayudarte.

      Eliminar
    2. Yeison, si quieres que la imagen se centre puedes aplicar el siguiente codigo:
      #header img
      {
      display:block;
      margin:0 auto 0 auto;
      }
      si no te soluciona el problema, te sugiero que me comentes el código que estas utilizando para poder ayudarte. Saludos

      Eliminar
    3. Muchisimas gracias joven! me sirvió el código, yo también necesitaba centrar la imagen, mil gracias!

      Eliminar
  2. Hola Neytor, quería darte las gracias por este post, gracias a él pude poner la cabecera del tamaño que quería.
    Ya me quedo por aquí leyendo todas la información buenísima que nos das.

    Gracias otra vez
    Alejandra

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu comentario Alejandra, me alegra mucho que te gusten mis Publicaciones! saludos!

      Eliminar
  3. Fácil y rápido! muchas gracias por compartirlo :)

    ResponderEliminar
  4. MANO TU PODRIAS DE SIRME COMO PONER UNA IMAGEN ABAJO AL PIE DE CABESERA QUE CUBRA LO ANCHO PARA DARLE UN FONDO ALOS ETIQUETAS Y IMAGENES

    ResponderEliminar
    Respuestas
    1. Hola Miguel, en verdad no me queda muy clara tu duda, podrías ser mas especifico para poder ayudarte? tu te refieres que debajo de la cabecera , pongamos otro imagen que sirva como fondo verdad? o me equivoco?

      Eliminar
  5. como le pongo un fonodo alos nombres de los gatget
    porfavor dame una solucion

    ResponderEliminar
    Respuestas
    1. Hola mellito, bueno primero debes buscar la clase o identificador que determina el titulo de los gadgets, por defecto en platillas personalizadas de blogger es:

      .widget .title
      {
      url('aqui la direccion de la imagen que usaras de fondo');

      }
      espero que te sea de utilidad .Saludos, cualquier cosa, solo deja un comentario!

      Eliminar
  6. Hola que tal bueno el tema pero a mi me gustaria ajustar las imagenes de las entradas a la miniatura de presentacion de la entrada que salen descuadradas como lo soluciono saludos

    ResponderEliminar
  7. pero no sale
    que dises si tedoy mi blooger y tu lo poones

    ResponderEliminar
  8. como le pongo un fonodo alos nombres de los gatget
    porfavor dame una solucion

    pero no sale
    que dises si tedoy mi blooger y tu lo poones

    ResponderEliminar
    Respuestas
    1. Hola Owen perdón, me equivoque al colocar el código tienes razón por eso es que no te sale, me olvide del Background-imagen el cual sirve para colocar Fondos, en este caso le añadirá un Fondo al Titulo de Tus Gadgets, el código corregido es el siguiente:

      .widget .title
      {
      background-image:url('Url de la imagen');

      }
      Ahora solo tienes que buscar una imagen copiar su URL y ponerla, Si tienes Algún Otro Problema solo escríbeme. Gracias por comentar!

      Eliminar
    2. te puedo dar mi bloger y tu lo pones si ayudame xfa

      Eliminar
  9. pero no sale
    que dises si tedoy mi blooger y tu lo poones

    ResponderEliminar
    Respuestas
    1. Okey Owen, contactame conmigo a eduarlord_neytor.tec1@hotmail.es , o usa el formulario de contacto que esta en la parte inferior derecha de mi Blog, para enviarme los datos de tu blog y poder ayudarte!

      Eliminar
  10. Ya Te Envie Los Datos Espero Tu Ayuda Gracias Que Pagina Tan Buena

    ResponderEliminar
  11. y Si Puedes Cambiale El Formato De Letra Se La Pones Por Arial

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Owen gracias por confiar en mi, ya le aplique una imagen los títulos de los gadgets de tu Blog, si deseas cambiar de imagen solo modificas la URL de la imagen que puse. Saludos!

      Eliminar
  12. Como Le Canbio El Tipo De Letra Con Codigos CSS

    ResponderEliminar
    Respuestas
    1. utiliza el atributo;
      .widget .title
      {

      font-family:"aki el tipo de letra";

      }

      para tu caso Owen, esto es para para cambiar el tipo de letra de los títulos de los gadgets.
      Cualquier duda no dudes en consultarla!!

      Eliminar
  13. Hola, intento poner una foto en todo el ancho de la "entrada de mi blog" y no puedo. Las opciones que aparecen en su mismo editor de blogger no me lo permiten por que si pongo "Grande" no quepa y si pongo "extra grande" rebasa el ancho de la "entrada de mi blog", quisiera un intermedio entre esas opciones.

    ResponderEliminar
    Respuestas
    1. Hola Brando, para personalizar el tamaño a gusto de tus imágenes te sugiero que lo Hagas por HTML, esto lo aras desde el editor de HTML de las entradas, busca las etiquetas width y height de la imagen a la que quieres personalizar sus dimensiones, width=ancho y height=alto, espero te sea de utilidad esta aclaración, posteriormente are una entrada respecto a tu duda, así que estate pendiente del Blog :D Saludos Gracias por comentar!

      Eliminar
  14. Respuestas
    1. hola Owen, a que te refieres con recortar el blog?

      Eliminar
  15. esque ala foto de la cabesera del blog sele sobresale un pedaso de el fondo

    ResponderEliminar
    Respuestas
    1. Hola Owen, existen 3 soluciones para ese problema, puedes colocar una imagen que cubra todo el entorno de la cabecera, o ajustar la imagen al tamaño de la cabecera para que cubra todo y la que tu dices recortar el blog, para recortar el blog, se hace en el editor de plantillas de blogger y buscas la opción ajustar ancho, ahí ajustas a tu gusto el ancho te tu blog. Pero lo mas recomendable es que pongas una imagen al tamaño exacto de la cabecera. cualquier otra duda estoy dispuesto a ayudarte! Gracias por comentar Owen. Saludos!

      Eliminar
  16. Hola de pura casualidad no sabras como hacer que el header se bloquee a un tamaño por ejemplo si ves el blog de jtrotti, cuando das zoom o lo contrario el header permanece del mismo tamaño he buscado (como di con el tuyo) pero no he encontrado lo deseado, tambien para que encaje en cualquier dimension, que se mantenga de orilla a orilla si me meto a una computadora de 960x X o a una mayor? sabes como hacerlo? gracias!

    ResponderEliminar
    Respuestas
    1. En verdad muy interesante lo de la cabecera del Blog de jtrotti, en verdad nose como realizar eso Paola, pero ten por seguro que lo investigare me interesa el tema, Gracias por Comentar. Saludos.

      PD: si llegas a saberlo antes de que lo postee, compartelo :D

      Eliminar
  17. Neyton, sos un maestro. Tengo este problema: Cuando aplico el código HTLM la foto de encabezado se ajusta perfectamente, pero cuando quiero poner el título del Blog encima de ella, vuelve a su tamaño original (que es demasiado grande) y pareciera no hacer caso al código ingresado. ¿cómo puedo arreglar esto? Estuve luchando todo el día :(
    Juan

    ResponderEliminar
    Respuestas
    1. Hola J, mira cuando aplicas algún código HTML o CSS en tu blog, y luego cambias los formatos en tu caso el de cabecera poniendo el titulo encima de la imagen, los códigos que aplicaste se eliminan, así que te recomiendo que primeros coloque el titulo encima de tu imagen y luego la ajustes. Si aun no se soluciona pasame la voz!! gracias por comentar saludos!

      Eliminar
    2. Gracias, Neytor. Lo hice así. Muchas gracias. Dios te bendiga.

      Eliminar
    3. Gracias J, me alegro que te aya servido mucho! Saludos y Gracias por tus bendiciones!!

      Eliminar
  18. Amigo Neyto un saludo y de antemano agradecerte el apoyo. Tengo el inconveniente de que no puedo insertar un gadget encima del slider que inserte. Te dejo mi blog http://peruanosaldias.blogspot.com/ agradeceré me puedas escribir a mi correo chaenca@gmail.com

    ResponderEliminar
  19. Amigo Neyto un saludo y de antemano agradecerte el apoyo. Tengo el inconveniente de que no puedo insertar un gadget encima del slider que inserte. Te dejo mi blog http://peruanosaldias.blogspot.com/ agradeceré me puedas escribir a mi correo chaenca@gmail.com

    ResponderEliminar
  20. Hola Neyto.
    Como pongo un video de Youtube para conseguir que se pueda reproducir desde mi blog.

    ResponderEliminar
    Respuestas
    1. Hola Alicia tengo un Tuorial sobre ese tema en mi Blog, visita el siguiente link: Vídeos de Youtube en nuestro Blog Espero te sea de utilidad gracias por Comentar. Saludos!!

      Eliminar
  21. oye gracias brot no sabia este truco es muy bueno gracias saludos.

    ResponderEliminar
    Respuestas
    1. Estamos para servirte Jesus. Gracias por comentar

      Eliminar
  22. Hola Neytor, no consigo centrar la foto de cabecera de mi blog, voy a Diseño/plantilla/añadir CSS y pongo:
    .header .widget {
    text-align:center;}
    .header img {margin:0 auto;}

    }

    y sigue igual, que estoy haciendo mal?

    ResponderEliminar
    Respuestas
    1. Hola Elvira aber prueba con poner
      .header-inner
      {
      margin:0 auto;
      }

      espero te ayude. cualquier duda solo comenta. Gracias por tu Comentario!

      Eliminar
  23. Una pregunta! quiero saber si se pueden centrar las entradas? en el sentido de que estas queden en el centro de la página(de la pantalla)
    Muchisimas gracias!
    Saludos desde Uruguay!

    ResponderEliminar
  24. eres un groso capo ayudas a todos jajaj buen blog tenes

    ResponderEliminar
    Respuestas
    1. EStoy para ayudar Miguel. Gracia por comentar!

      Eliminar
  25. Que tal, tengo una imagen que quisiera poner de cabecera pero no abarca el ancho que yo quiero, queda muy chica para mi gusto, eh buscado y buscado y no se donde modificar el código, agradecería tu ayuda. Saludos

    ResponderEliminar
  26. muchas gracias amigo, tu información me fue muy útil

    saludos

    ResponderEliminar
  27. wooow..! busqué tantos tutoriales para hacer esto y este fue el que me sirviooo!! GRACIAS MIL...!! estoy comenzando mi blog... VISITEN POR FAVORR!! http://elblogdeluzmom.blogspot.com/

    ResponderEliminar
  28. hola buenas tardes podrias hayudarme con este codigo

    /* Banner */

    #banner
    {
    height:50em;
    width:auto;
    padding: 1px;
    margin: 1px;
    height: 22.5em;
    overflow: hidden;
    background: url(../images/pic011.png) no-repeat center ;
    }
    es de una imagen que es el baner de mi pagina y como le ago para que la omagen ocupe el espacio dedicado al baner , o talves tambien tengo que modificar el html

    ResponderEliminar
  29. Hola, habría alguna forma de poner en el cabecero dividido en dos, una parte una imagen y a la derecha un embed de youtube??

    Gracias!

    ResponderEliminar
  30. Hola, consulta, como puedo dejar mi imagen de cabecera con ancho total de pantalla , usando plantilla Responsive

    ResponderEliminar