31/07/2008
08:41
Tutorial
Darle un nuevo estilo a nuestro blog, modificando nuestra cabecera, mostrando una imagen que sobresale del cuerpo del blog, envolviéndolo, no es nada complicado, los nuevos diseños tienden a eso.
Todos estamos acostumbrados a incluir el nombre de nuestro blog o a lo sumo insertar una imagen de fondo con el elemento header que nos proporciona Blogger. Pero con eso solo logramos mostrar nuestro blog con la típica estructura rectangular. También procuramos darle otro aire insertando una imagen de fondo en nuestro body y la mayoría de las veces el resultado no nos convence.
Conseguir esto no es nada difícil, para ello debemos seguir los siguientes pasos:
Paso 1. Confeccionar la imagen que usaremos como Header.
El primer dato importante en este paso es saber que dimensión vamos a darle a nuestra cabecera. Yo normalmente uso un cuerpo (outer-wrapper) con 780 pixeles de ancho (width: 780px;) por lo que mi imagen de cabecera la hare mayor, si usáis un cuerpo menor podréis reducir estas dimensiones. Las medidas usadas son 1024 de ancho por 300 de alto, esto hace que visitas que entren con resoluciones de 800*600 pixeles, no vean parte del lateral de nuestra cabecera. Hace algún tiempo decidí (me podréis criticar por ello y con razón) "ignorar" este problema, el porcentaje de visitas con esa resolución es mínimo y uno debe tomar una decisión sobre el tamaño de su blog. De todas maneras es una decisión que deberéis tomar, si optáis por que se vea entera con esa resolución, os recomiendo una medidas de 780 pixeles de ancho por 250 de alto, eso sí, el cuerpo del blog deberá ser inferior a 680px.
Una vez decididas estas dimensiones, para dar el aspecto que pretendemos, vamos a usar la imagen como background del body y vamos a bajar el outer-wrapper lo suficiente para que quede la imagen del blog como queremos. Así conseguiremos que se vea la imagen como cabecera y sobresalga por los laterales.
A la hora de realizar nuestra imagen debemos tener claro este concepto, nuestra imagen quedara tapada en parte por el outer-wrapper y debemos prestar especial atención a lo que realmente se verá.
También debemos tener en cuenta el tamaño de la misma, una imagen muy pesada hará que nuestra página tarde más en cargar.
Mañana veremos como crear la imagen con Gimp. Te recomendamos también + Artículos relacionados de Tutorial
Hola! me ha dado la fiebre bloggera y buscando como loca llegué hasta aquí ^_^
ResponderSuprimirTengo poca (o ninguna) idea, así que voy perdida y poco a poco :P
Quizás la pregunta que voy a hacerte sea muy tonta perooooo me arriesgaré hehe
Querría saber si los trucos para embellecer los header que cuentas aquí, son aplicables a alguna plantilla en concreto de las que blogger trae como base.
Es que he intentado trastear con varias de ellas y no todas traen el código igual...huh
(gracias si te has tomado la molestia de leerme! ^^)
Alizia, gracias por la visita, normalmente son para la plantilla minima, plantilla que recomiendo para todos los que empiezan a "trastear"...de todas formas si me mandas tu plantilla te digo a que corresponde cada cosa ☺☺☺
ResponderSuprimirMuchísimas gracias por tu rápida respuesta, Pizcos!
ResponderSuprimir"Mi plantilla" no te la puedo mandar, porque de momento no tengo nada concreto, andaba probando en unas y en otras para ver cómo funcionaba, aún lo tengo sin contenido ni nada (ya te digo, me atacó la fiebre ayer por la tarde :P)
Voy a probar cosillas entonces en la plantilla mínima a ver qué tal me desenvuelvo y si me veo con más dudas te abordaré de nuevo hehehe :D
Muchas gracias otra vez, por tu respuesta y por éste blog! ^^
Pizcos, buenas tardes... me parece un lugar interesantìsimo èste que estoy descubriendo hoy, te felicito!
ResponderSuprimirUna consulta: tengo ganas de hacer unos pequeños cambios a mi blog en el año 2009 y tenìa ganas de hacer una cabecera sin imagen pero con letras algo adornadas (se entiende?) o sea no usar sòlo las tìpicas "verdana, arial...etc." que me ofrece Blogger. Còmo puedo hacer para logarlo? Gracias por tu ayuda, saludos!!
Gracias Sandra...yo te recomendaria hacer una imagen con esas letras..si usas Gimp puedes hacerlo...de otra forma podrias usar css pero no te garantiza que pueda verse el tipo de letra que vayas a usar en todos los navegadores de tus visitas...se usa la propiedad font-family: 'AQUI IRIA EL TIPO DE LETRA';
ResponderSuprimirpero si tu visita no tiene ese tipo de letras no la veria como tu..por eso te recomiendo usar una imagen con el tipo de letra ☺☺☺
Gracias Pizcos, intentaré con lo de Gimp.. te agradezco muchísimo tu tiempo para responderme y sacarme de dudas.
ResponderSuprimirGracias!! Buen año para vos♥♥♥