Buscamos que nos quede de esta forma en la zona de Diseño/Elementos de página:


El tema de añadir espacios en tu plantilla dependerá de su forma interna y diseño. No hay que perder de vista que en muchos Templates, por el diseño de la cabecera, sería una pérdida de tiempo añadirlo.
En temas de "añadir espacios" lo mejor es estar seguro del resultado que quieres obtener y qué uso le quieres dar a esa zona.


(Recuerda que se puede colocar otro espacio en la parte inferior de la cabecera "Crosscol" de forma sencilla)

1. Diseño - Edición HTML


2. Apretamos a la vez las teclas Ctrl+F para que nos aparezca el "bendito buscador de palabras"
y buscamos el código:

<div id='header-wrapper'>



3. Nos encontraremos con algo similar a:



<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='NOMBRE DE TU BLOG (cabecera)' type='Header'/>

</b:section>

</div>



4. Se trata de modificar el 1 por un 2, y no por yes.

5. Hacemos "Vista Previa" para saber si lo acepta. (I) (por pura precaución)

6. Guardar plantilla. (II)

(Apunte)



► Otras opciones:

El header es una sección que se pueden crear donde sea. Sólo hay que agregar los atributos ID y CLASS para poder establecer sus propiedades con CSS:


<b:section class='unaClase' id='unNombre' showaddelement='yes'>

</b:section>


Por defecto, el header tiene una serie de propiedades; dos de ellas fundamentales:


#header-wrapper {

margin: 0 auto;

width: valorpx;

...

}

#header {

...

}


#header-wrapper es el rectángulo total, el que dividiremos en dos partes, allí deberemos mirar el valor de la propiedad width que nos dice el ancho total disponible.

#header es un bloque interior, el que contiene la imagen o los textos y, por defecto, ocupa el mismo espacio que el bloque contenedor. Se disminuirá a una medida arbitraria, menor que el total y lo haremos flotar a la izquierda; además, agregaremos un segundo bloque que tendrá las mismas propiedades que el anterior pero, con una medida diferente y flotará a la derecha:

#header {

float: left;

width: 600px;

[... otras propiedades ...]

}

#header-derecho {

float: right;

width: 200px;

[... otras propiedades ...]

}


SIN expandir los artilugios buscamos el código:


<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>

</b:section>

</div>


Y lo modificamos, agregándole la nueva sección:


<div id='header-wrapper'>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>

  </b:section>

  <b:section class='header' id='header-derecho' showaddelement='yes'>

  </b:section>

</div>


Si guardamos la plantilla, veremos que esta nueva sección ya está habilitada en la solapa Elementos de la página en la derecha (encima zona sidebar) para agregar cualquier cosa.


10 comentarios:

LadyMarian

Felicitaciones! Muy bien explicado. Esta entrada y las dos que le siguen me parece que van a mostrar otras posibilidades a muchos, aunque quizás no las necesiten ahora.

Preguntita:
Tengo un problema con los nombres. Te digo lo que yo entendí. Por favor, corregime si entendí mal:
1) Cabecera (=header): es donde vos tenés la copa y demás imágenes y dice Un blog de Lujo
2) Crosscol: Es debajo de lo que dije en 1). O sea, todas las pestañas con etiquetas (o como se diga) Vos tenés 3 filas, serán unas 20 aproximadamente
3) Espacio sobre cabecera: Estaría arriba de 1). En tu caso es donde dice: Inicio, índice del blog, suscribe feed, etc.

Besotes

María Elena

He hecho todo lo que comentabas pero resulta que me sale una advertencia para cancelar los artilugios Header1 y se borraran si lo hago, ¿esto quiere decir que me borrará la cabecera que tengo? Dime algo porfa.

Lujo

Hola MªElena
He hecho la misma operación que tú en un blog de pruebas y no me sale esa advertencia.

En vez de copiar el código que te doy, cambia sólo los elementos que se señalan:

Se trata de modificar el 1 por un 2, y no por yes.
Localízalos y hazlo manualmente.

Tómatelo con calma y más si tienes poca experiencia con códigos HTLM. Al principio todo es un caos.
Suerte!

Lujo

Hola LadyMarian

1. Si, el espacio Cabecera o Header es el que comentas. Al menos eso es lo que tengo entendido cuando leo y estudio blogs de ayuda. (Ya sabes que éste no lo es)

2. Sí, el Crosscol es la zona que señalas bajo el Header...., pero sólo es un elemento.
En la plantilla con código CSS se le otorgó a ese espacio una utilidad.
En realidad tener un crosscol es un espacio más que según el uso que se le quiera dar, puede servir para múltiples funciones. Depende de la imaginación de cada uno.

3.Sí, podríamos llamarlo así. Disculpa si no sé el nombre exacto de esa parte. Es un simple menú añadido con CSS en la plantilla.
Algunos la usan para poner una imagen como cabecera que contenga la imagen o el título.
En estos temas, últimamente, veo que se hacen muchas variaciones...,tantas como dé la imaginación.
Siento no ser más expecífica. Ya sabes que no soy una experta.
Abrazotes enormes!

LadyMarian

Fuiste muy clara! Ahora tengo claros los conceptos. Gracias!!!
Besotes

Tinkertripper

Voy a llorar... 2 de 2!!!! Gracias!!

Lujo

Hola Holaa Tinkertraveler
Bienvenido a este blog y mil gracias por tu comentario.
Palabra que me encanta tu alegría.
Abrazotes!

Pepo

Hola
Llevo toda la mañana buscando una solucion, y no la encuentro. Asi que decido rendirme. Y pasar a la estrategia de preguntar.
Decidi en su momento dividir la cabecera, para ocupar el margen derecho, con algun gadget o cualquier otro elemento.
Mi problema es que no consigo ponerlos a la misma altura.
Por lo que me sigue quedando ese espacio en blanco.
Podrias indicarme como hacer para alinear titulo y gadget.
Saludos

H. Kramer

Excelente! Gracias!

Lujo

@Kramer
A ti!
Chao

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP