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*/
}
#header img
Cualquier duda o Aporte pueden hacerlo por comentarios. Gracias por su Tiempo!.
A UN NO LOGRO CENTRAL LA IMAGEN,Y AÑADÍ EL CSS QUE DEJASTE EN ESTE POTS,QUE ESTOY HACIENDO MAL..
ResponderEliminarHola 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.
EliminarYeison, si quieres que la imagen se centre puedes aplicar el siguiente codigo:
Eliminar#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
Muchisimas gracias joven! me sirvió el código, yo también necesitaba centrar la imagen, mil gracias!
EliminarHola Neytor, quería darte las gracias por este post, gracias a él pude poner la cabecera del tamaño que quería.
ResponderEliminarYa me quedo por aquí leyendo todas la información buenísima que nos das.
Gracias otra vez
Alejandra
Gracias a ti por tu comentario Alejandra, me alegra mucho que te gusten mis Publicaciones! saludos!
EliminarFácil y rápido! muchas gracias por compartirlo :)
ResponderEliminarMANO 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
ResponderEliminarHola 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?
Eliminarcomo le pongo un fonodo alos nombres de los gatget
ResponderEliminarporfavor dame una solucion
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:
Eliminar.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!
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
ResponderEliminarpero no sale
ResponderEliminarque dises si tedoy mi blooger y tu lo poones
como le pongo un fonodo alos nombres de los gatget
ResponderEliminarporfavor dame una solucion
pero no sale
que dises si tedoy mi blooger y tu lo poones
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:
Eliminar.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!
te puedo dar mi bloger y tu lo pones si ayudame xfa
Eliminarpero no sale
ResponderEliminarque dises si tedoy mi blooger y tu lo poones
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!
EliminarYa Te Envie Los Datos Espero Tu Ayuda Gracias Que Pagina Tan Buena
ResponderEliminary Si Puedes Cambiale El Formato De Letra Se La Pones Por Arial
ResponderEliminarGracias
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!
Eliminargrcias amigo
ResponderEliminarComo Le Canbio El Tipo De Letra Con Codigos CSS
ResponderEliminarutiliza el atributo;
Eliminar.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!!
UY Gracias
ResponderEliminarHola, 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.
ResponderEliminarHola 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!
Eliminarcomo recorto el blog
ResponderEliminarhola Owen, a que te refieres con recortar el blog?
Eliminaresque ala foto de la cabesera del blog sele sobresale un pedaso de el fondo
ResponderEliminarHola 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!
EliminarHola 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!
ResponderEliminarEn 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.
EliminarPD: si llegas a saberlo antes de que lo postee, compartelo :D
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 :(
ResponderEliminarJuan
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!
EliminarGracias, Neytor. Lo hice así. Muchas gracias. Dios te bendiga.
EliminarGracias J, me alegro que te aya servido mucho! Saludos y Gracias por tus bendiciones!!
EliminarAmigo 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
ResponderEliminarAmigo 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
ResponderEliminarHola Neyto.
ResponderEliminarComo pongo un video de Youtube para conseguir que se pueda reproducir desde mi blog.
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!!
Eliminaroye gracias brot no sabia este truco es muy bueno gracias saludos.
ResponderEliminarEstamos para servirte Jesus. Gracias por comentar
EliminarHola Neytor, no consigo centrar la foto de cabecera de mi blog, voy a Diseño/plantilla/añadir CSS y pongo:
ResponderEliminar.header .widget {
text-align:center;}
.header img {margin:0 auto;}
}
y sigue igual, que estoy haciendo mal?
Hola Elvira aber prueba con poner
Eliminar.header-inner
{
margin:0 auto;
}
espero te ayude. cualquier duda solo comenta. Gracias por tu Comentario!
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)
ResponderEliminarMuchisimas gracias!
Saludos desde Uruguay!
eres un groso capo ayudas a todos jajaj buen blog tenes
ResponderEliminarEStoy para ayudar Miguel. Gracia por comentar!
EliminarQue 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
ResponderEliminarmuchas gracias amigo, tu información me fue muy útil
ResponderEliminarsaludos
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/
ResponderEliminarhola buenas tardes podrias hayudarme con este codigo
ResponderEliminar/* 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
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??
ResponderEliminarGracias!
Hola, consulta, como puedo dejar mi imagen de cabecera con ancho total de pantalla , usando plantilla Responsive
ResponderEliminar