JMiur [E]

Continuando con la idea de ver si es posible flexibilizar la rigidez aparente del header de Blogger, vamos a un ejemplo que he puesto en un blog de pruebas tratando de utilizar nada más que las propiedades CSS. Sólo se trata de jugar un poco.

Subo una imagen (robada inescrupulosamente), un gif animado de 70x60 que milagrosamente funciona. Dejo marcada la opción de ver los textos y la imagen. Además, cambio el título por esto:
<b>Blogger</b> se despertó
Y la descripción por esto:
Pero sólo por un <i>ratito</i><br/>
<a href="http://vagabundia.blogspot.com/">Volver al blog</a>
Guardo y el resultado no es muy agradable:


El CSS por defecto de una plantilla mínima nos muestra algunas propiedades así que es hora de ver de que de tratan y así intentar modificarlas aunque este nuevo código de Blogger no nos lo hará fácil.

El código original
#header-wrapper { /* es el bloque contenedor de todo el encabezado */
border: 1px solid $bordercolor; /* tiene un borde */
margin: 0 auto 10px; /* está centrado (auto) */
width: 660px; /* normalmente, el ancho es igual que el de #outer-wrapper */
}

#header { /* es el bloque interior */
border: 1px solid $bordercolor; /* también tiene borde */
color: $pagetitlecolor; /* el color de los textos */
margin: 5px; /* es más chico que el anterior por eso vemos dos bordes */
text-align: center; /* todo el contenido estará centrado */
}

#header-inner { /* es el bloque con la imagen */
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 { /* es el texto del título del blog */
font: $pagetitlefont; /* la mayoría de las propeidades definen el tipo de fuente */
margin: 5px 5px 0;
letter-spacing: .2em;
line-height: 1.2em;
padding: 15px 20px .25em;
text-transform: uppercase;
}

#header a { /* el texto del título del blog es un enlace */
color: $pagetitlecolor;
text-decoration: none;
}
#header a:hover {color:$pagetitlecolor;}

#header .description { /* es el texto de la descripción */
color: $descriptioncolor;
font: $descriptionfont;
letter-spacing: .2em;
line-height: 1.4em;
margin: 0 5px 5px;
padding: 0 20px 15px;
max-width: 700px;
text-transform: uppercase;
}

#header img { /* es ... vaya uno a saber qué es */
margin-$startSide: auto;
margin-$endSide: auto;
}

Una propiedad que podriamos agregar a header-wrapper es background es decir, como la imagen que coloco en el header no es un banner sino que es pequeña, puedo poner otra; en este caso, quiero que se vea a la derecha así que le agrego esto:

background: transparent url(URL_imagen) no-repeat right 50%;

¿Cómo subo la imagen a Blogger? La agrego en un post cualquiera, tomo nota de la dirección y luego elimino el código generado.

Ya que voy a manipular el código, para evitar problemas es buena práctica agregarle una propiedad que defina la altura de todo el header; para eso, usamos height.
#header-wrapper {
background: transparent url(URL_imagen) no-repeat scroll right 50%;
border: 1px solid #CCCCCC;
height: 216px;
margin: 0 auto 10px auto;
width: 660px;
}
El bloque header es el rectángulo que está dentro del anterior. Elimino el borde y, como en el caso anterior, podríamos colocar otra imagen como fondo pero, esta vez a la izquierda:

background; transparent url(URL_imagen) no-repeat left 50%;
#header {
color: #666666;
height: 216px;
margin: 5px;
}
header-inner es clave; es el rectángulo que nos muestra la imagen que hemos subido y aparecerá centrada porque tiene margin-left y margin-right establecidos como auto. Como quiero que se vea más a la derecha, se los voy a quitar. Es poco lo que podemos hacer ahí ya que lo que hace Blogger es colocar los datos directamente en la plantilla con un código que a primera vista asusta:
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl 
+ &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr
+ &quot;; &quot; + data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;'
id='header-inner'>
En fin eso, sólo coloca la imagen que subimos y cuyos datos guarda Blogger para luego generar esto:
<div style="background-image: url(URLimagen);
background-position: left center; width: XXpx; min-height: XXpx;
background-repeat: no-repeat;"
id="header-inner">
En caso de emergencia, es allí donde debemos modificar las cosas pero, vamos a tratar de obviarlo así que sólo eliminaremos el centrado:
#header-inner {
background-position: center;
}
En el título, los cambios afectan a la fuente de texto salvo margin que sólo lo mueve a la izquierda 60 pixeles. También se agrega una propiedad width; eso es algo que siempre debemos hacer cuando se trata de ubicar bloques:
#header h1 {
color: #000000;
font-family: Arial;
font-size: 24px;
letter-spacing: -1px;
margin: 0 0 0 60px;
padding: 0;
width: 400px;
}
Lo mismo ocurre con el texto de la descripción:
#header .description {
color: #999999;
font-family: 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size: 13px;
letter-spacing: 1px;
margin: 0 0 0 65px;
max-width: 700px;
padding: 0;
text-transform: uppercase;
width: 400px;
}
Para poder ubicar los textos, le agrego una definición, usando la clase header. Con margin, bajo los textos:
.Header {
margin-top: 110px;
}
Y lo que falta es establecer las propiedades de los formatos extras de esos textos:
#header h1.title b { /* la negrita el título */
color: #2788CF;
font-family: Georgia;
font-size: 40px;
}

p.description i { /* la itálica de la descripción (no la uso) */ }

p.description a { /* el enlace agregado a la descripción */
color: #2788CF !important;
font-family: Tahoma;
font-weight: bold;
}
p.description a:hover {color: #CC6600 !important;}


sonrisa Y con esto, termina el juego [ver ejemplo online ]

31 comentarios:

Fernandooo1  

¿Y yo? ¿También la habré robado inescrupulosamente? xD!

Ese .gif me inspira confianza.

El header terminó muy, muy bien al final.

Sin mucha imagen... jugando con el CSS.

Responder
Poca Tinta  

Que bien esta de Lujo!!!, como lo hiciste hace un tiempo estuve intentando subir un gif animado y no me dejaba. Pero el que sabe es el master.

Saludos maestro, deja un sin numero de opciones para jugar, espero los chicos anormales de blogger no lo cambien.

Responder
JMiur  

¿Alguien dijo robar? ... digamos ... tomar prestado ;)

Si, da para jugar y en realidad, todo es CSS y no toqué el código de Blogger, esa era la idea.

Lo del gif es pura casualidad. Algunos, los subes y funcionan, otros, no y en ese caso los subes a otro sitio y listo.

Responder
Gem@  

Genial, me diste una idea voy a ver si furula ;)

Responder
JMiur  

Jajajaja Suerte, Gem@, ya despertaste mi curiosidad :)

Responder
Anahí  

Muy buen blog, che, te felicito, hacés perder el miedo hasta a las fórmulas químicas, ja,ja .
Salú2.

Responder
JMiur  

Saludos Anahí, por ciero, odio las fórmulas químicas :D

Responder
HaCk CrAcK  

Esto seria una imagen y la estubiste modificando con CSS?, para agregar los textos y todo eso?

Responder
JMiur  

No es una imagen sino el header de un blog real que utilizo para hacer pruebas: ACÁ

Responder
HaCk CrAcK  

Ahh un header, ahora entiendo, gracias!!

Responder
.:Lewis  

Muchas gracias, al final me salio bien, pero no del todo... yo uso IE7 y en la barra de titulo me aparece Titulo del Blog, en ves de solo el titulo, no se si me explique bien. de todas formas pasate por mi blog de pruebas. Estube jugando con el tutorial de las columnas.

Responder
JMiur  

Lewis:
Hay una confusión, no l oexplicqué correctamente. El títul oal que me refiero no es la etiqueta TITLE de la plantilla sino el título que le colocamos al bog en Configuravión | Título, allí es donde coloqué:
<b>BLOGGER</b> se despertó

Coloc´´andolo en la etiqueta TILE, l oque veo es esto:
<b>Lewis</b> en <b>Axion!</b>

Responder
administrador  

oye me encanta el comentarios ABRIR POP-UP, estoy haciendo un blog para un actor hondureño y quiero hacerlo lo mejor posible pues quiere impresionar!, el blog lo acabo de generar:: http://edgarfloreshn.blogspot.com/ mi blog es http://espaciocreativo.blogspot.com/ al ver tu blog me he dado cuenta que hay tanto que se puede incluir, ahora que tengo un poco mas de tiempo puedo ver que si se puede... me gustaria tener el comentarios al final de la pagina como puedo hacerlo? Gracias!!

Responder
administrador  

me equivoque con la segunda direccion::: es http://espaciocreativohn.blogspot.com/

Saludos desde honduras!!

Responder
JMiur  

Es una opción del mismo Blogger así que la primera cosa a hacer es habilitarlo. eso se hace en Configuración | Comentarios y allí en Ubicación del formulario de comentarios se marca Entrada incrustada a continuación.

Si la plantilla que usas es reciente, el resto del código debe estar incluido así que sólo eso debería mostrar el formulario debajo de las entradas individuales.

Responder
Dña. Urraca  

Hola, soy la pesada de siempre con un problemilla que llevo horas intentando solucionar y no doy con él. Resulta que he cambiado el header
Porque por el blog de Gema vi unas letras que me gustaban y...el caso es que lo tenía que poner como imagen así que en lugar de irme a la plantilla me fui a elementos de pag. para cargar la imagen elaborada por mi, y use la opción de en lugar de titulo y descripción, el resultado me gusta pero y aquí viene mi problema se me sale un trozo del borde que quiero mantener, y no se donde tocar llevo un buen rato probando y nada sigo con la coleta fuera, ¿que hago? o que deshago?

Responder
JMiur  

Dña. Urraca:
Eso ocurre porque estás colocadno una imagen demasiado grande. Si bien el header tiene 980 pixeles de ancho al igual que la imagen, tiene márgenes y bordes que hacen que el espacio interior se reduzca. Lo mejor sería redimensionar la imagen para que ocupe el lugar exacto y volverla a subir.

El ancho exacto, por lo que veo, debería ser de 968 pixeles.

Responder
Dña. Urraca  

Osea que estoy intentando meter un pollo en una botella, :(, bruta yo. De nuevo gracias, vuelvo a repetir que eres un encanto y con paciencia, rara avis, te pediría matrimonio pero ya estoy casada :D, además no soy buen partido.

Responder
Dña. Urraca  

Efectivamente lo acabo de solucionar ¿cuantas los pixeles uno a uno?:D:D
Desde que estoy con esto del blog he olvidado la máxima de cualquiera que trata con un pc (para mi "jodia maquina") y que aprendí hace tiempo, "ante cualquier problema probar primero lo mas fácil". Te lo agradecería con flores pero las que tengo mas cerca son de plástico.

Responder
JMiur  

"Ante cualquier problema probar primero lo mas fácil". Me parece una buena frase para tener siempre presente :D
Es inevitable olvidarse de eso porque, por lo general, buscamos problemas a cualquier solución :D

No hace falta conatrlos de a uno aunque no es mal método y todos sirven. En este caso es sólo aritmética. Si el #header tiene 980 pixeles y 5 de margin, quedan 970 y como tiene un borde de 1 pixel, el ancho libre es de 968. Siempre, el espacio interno de cualquier elemento es el ancho menos los márgenes menos los bordes.

Responder
friends  

hola
me preguntaba si hay una forma de poner una imagen diferente en un post en especial, que eligas un post y solo en ese post aparezca la imagen que tu quieres

Responder
JMiur  

friends:
Si, eso es posible; hay varias formas, una de ellas sería colocando una condición antes de </head> para que se detectara el título del post:

<b:if cond='data:blog.pageName == &quot;TITULO_DEL_POST&quot;'>
<style>
....... aquí colocas las propeidades CSS de ese header
</style>
</b:if>

Responder
Liliana  

Hola, quería preguntarte que se pueda hacer cuando uno oculta el header y todo se mueve hacía arriba, que se puede hacer para que siga el espacio o más bien para que la primera entrada no se suba...
yo no quiero tener ni el título ni la imagen de cabecera, quiero trabajar sobre el body del blog... sí tienes alguna idea y la pudieras compartir... gracias.

Responder
JMiur  

Tendría que ver el blog para indicarte exactamente pero, si n hay header, lo que puedes hacer es colocar un margen en el body mismo; por ejemplo:

body { margin-top: 10px, }

Lo mismo puede hacerse con cualquier DIV , por ejemplo, en una plantilla Mínima sería:

#outer-wrapper { margin-top: 10px, }

Responder
Liliana  

Gracias, perfecto.

Responder
ivan  

hola mira mi blog es http://bloodangel-83.blogspot.com/ como puedes ver mi header esta dibidido en 2 en la parte derecha la imagen queda muy arriva mientras que en la parte izquierda muy abajo que puedo hacer para solucionarlo??

Responder
JMiur  

No puedo decirte ya que las imágenes no se ven. Es que están alojadas en tinypic.com y ese servicio las bloquea en algunos paises y por lo tanto, son incaccesibles.

Responder
vergaragodoy  

Se podrá hacer que la imagen de la cabecera cambie dependiendo de la url? Algo asi como http://www.elmostrador.cl/vida-en-linea/

Gracias, muy buen blog.

Responder
JMiur  

Usando JavaScript si. Hay que detectar la URL de la página que la da esto:

var dondestamos = window.location.href;

El resto dependerá de si el header es una imagen, un fondo o un texto.

Responder
Edison urquijo  

tu blog es demasiado incomodo para leer deberias cambiar el diesño de la página por un color donde se resalte el texto

Responder
JMiur  

Pués no lo leas y asunto solucionado ¿algo más?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR