Crear un espacio debajo de la cabecera es sencillo dependiendo del código que tengamos en nuestra Plantilla o Template.
La zona inferior del header podemos colocarla para en el futuro poner imágenes, un menú, etiquetas o mil cosas más que se te ocurran.

Añado esta imagen para que se vea más claramente que se trata de "crear" un nuevo espacio, y no es aquel que podemos obtener en el cuerpo de las "Entradas del blog".



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

El código que debiera estar en tu plantilla es el siguiente...

1. La clave está en encontar con Ctrl+F


<div id='content-wrapper'>


2. Justo debajo aparece (si la plantilla es de Blogger y dependiendo del Template)


<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>


En este caso el menú no está habilitado para añadir el espacio. Para hacer que esté accesible y funcione como un espacio más al que añadir gadgets, sólo hay que modificar showaddelement='no' por showaddelement='yes'

Quedará de esta forma:


<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

</div>


► Atención:

En muchos Templates estas líneas no aparecen. En mi caso, me he encontrado con alguno y sólo he añadido el código anterior bajo la línea <div id='crosscol-wrapper' style='text-align:center'>
(En los dos casos que he probado ha funcionado sin problemas la adición extra de los códigos).


► La siguiente pregunta es:

Una vez añadido este elemento, ¿cómo lo puedo personalizar?

Ahí está la habilidad que cada uno tenga y el uso que se le vaya a dar en el futuro.

Se le pueden añadir bordes, fondos, textos, márgenes, imágenes.....Básicamente se suelen añadir cosas de estilo con CSS antes de ]]></b:skin>

En mi caso uso el siguiente:


#crosscol-wrapper{

background-color: #bfe6ff;

margin-top:5px;

border:6px dotted #66B5FF;

padding:2px;

}


Si hubiera que añadir una imagen al fondo, otra fórmula sería:


#crosscol-wrapper{

background:#FFF;url(url-de-la-imagen);

margin-top:5px;

border:2px solid #a6c4e1;

padding:2px;

}


■ "background-color" es el color de fondo de tu crosscol; "border" expresa el tamaño del borde, el tipo de líneas que usas y el color de éste.

Web para cosultar códigos de colores.




Como anotación personal:

Otra fórmula para Personalizar el crosscol es darle los mismos estilos que tiene la sidebar /* Sidebar Content
----------------------------------------------- */



/* Sidebar Content

----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}



.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}



.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}



.main .Blog {

border-bottom-width: 0;

}






■ Se trata sólo de sustituir la palabra sidebar por crosscol para que tenga las mismas características que tu columna. Y añadirse como un elemento más antes de
]]></b:skin>





/* Crosscol----------------------------------------------- */





.crosscol {

color: $sidebartextcolor;

line-height: 1.5em;

}



.crosscol ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.crosscol li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}



.crosscol .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}



.main .Blog {

border-bottom-width: 0;

}



Con la última parte de la personalización del crosscol, sólo muestro que hay varias formas de hacerlo:

1. Aplicando un código CSS donde se le indica el color de fondo, bordes...
2. Dándole las mismas características que tendría tu columna o sidebar (color, títulos, formato...)


Sólo es una guía para demostrar que se pueden hacer un montón de combinaciones.



(Un apunte más para no olvidar)


15 comentarios:

betoargba

Jajaja...yo descubrí que podía agregar imágenes o videos debajo del header, aún sin modificar los códigos...lo que no sabía es como modificar los márgenes, los bordes y todo eso...veré si pruebo entrando en la plantilla.
Besitos

Nancy

Uy Lujito, qué pilas. Yo ni siquiera he colocado lo que me enviaste... Es que soy mera perezosa cuando se trata de cambiar las cosas del blog.
Pero no creas que no tomo nota... algún día, corazón, algún día.
Apapachos

ADELFA MARTIN

Uyyy, con lo que a mi me gustarìa colocar cosas diferentes debajo del Header...tanto que me gusta verlo en otros...pero te lo juro, el dìa que yo entienda esto serà porque habrè reencarnado...porque en esta vida?...

besos amiga

joselop44

Lo explicas de maravilla.
Un abrazo

Emy

Uy esto me gusta mucho porque yo lo veía en otros blog y pensé, ¿como se podrá hacer esto? y claro aquí esta nuestro Lujo, que haría yo sin ti :), ya mismo lo voy a probar.

Muchos Besos.

Emy

Guaaaaaa lo probé y funciona, me encanta, muchas gracias Lujo.

Besosssssss.

Lujo

Hola Hola Beto
Creo que donde tienes el espacio en el que has puesto vídeos y demás es una zona que está en la parte superior del cuerpo "Entradas al blog", la zona de Diseño - Elementos de página.

En el caso que comentas dependerás de los códigos de esa ubicación. La zona que comento está un escalón más arriba y abarca toda la anchura del header, se llama crosscol.
Si te fijas, (pues usas la Mínima de Blogger), sólo tendrías que variar un dato para obtener más espacio.
De todas formas, usarlo o tenerlo es algo personal.
Cada cual hace las cosas a su tiempo, cuando tiene ganas...Lo importante es saber que algo se puede hacer y saber cómo buscarlo.
Perdón por el rollo (#^_^#)
Miles de abrazotes enormes!!!





Hola Hola Nancy
La filosofía de un blog es hacer lo que te guste, cuando quieras y como quieras.
Si un día tienes ganas, lo haces(-^o^-) (^_-).
Un blog debería servir para "sumar" y no para "restar".
Abrazotes gigantescos!!!!




Hola Hola Adelfa
Ni te preocupes. Llevo unos meses mirando códigos y ahora empiezo a entender algunas cosas. Nunca se sabe...algunas veces las cosas salen fácilmente.
Lo importante es que te sientas bien con tu blog, lo demás poco importa.
Abrazotes enormes!!!



Hola Hola Joselop
Muchas gracias. Son sólo unos apuntes.
Abrazotes!!


Hola Holaaaaa Emy
Me alegra que te haya servido un apunte que tomé entre mis notas para construir el blog.
Es genial que te sea de utilidad
(-^o^-)
Abrazotes enormes!!!

ANITA

No me atrevo a meterme con la plantilla ni cambiar nada,seguro luego se me olvida y te tengo que preguntar jaj. De todas maneras estos consejos son muy buenos y merece la pena guardar todo por si un día me da por intentar algo.
Bastante hice con cambiar el aspecto y no cargarme nada jeje aunque eso lo hace un niño de tres años. Eres la caña amiga.
Muchos besotes gordotes

Lujo

Hola Holaa ANITA
Mi niña, atreverse con la plantilla de tu blog es una cuestión de tener ganas de hacerlo.
Mi forma de ver el mundo del blog es un tanto especial, pues pienso que con él debes hacer sólo aquello que tengas ganas o te haga feliz.
Si quieres dedicarte al diseño, a escribir un post determinado, comentar algo concreto....es una cuestión que debe "sumar" a tu estado de ánimo y no "restar".
Lo mejor es no agobiarse con el blog y hacer las cosas al ritmo de cada cual. Si no es así puedes acabar cerrando el blog de un ataque de nervios.
Haz lo que te apetezca con el blog...Si un día tienes ganas o lo necesitas, ya sabes que existen mil trucos para cambiar cosas del mismo.
Chiquita, sé feliz con tu blog(^_-)
Abrazotes gigantescos!! ♥♥

CAS

Me interesa incluir esta modificación en mi blog, pero tendré que leer tus instrucciones unas cuantas veces más...jajaja, como siempre hay que animarse y practicar.
GRACIASSSSSSSSSSSSSS por tu ayuda.

LadyMarian

Muy interesante y muy bien explicado! Como vos decís, es bueno saber cuáles son las opciones que hay para después, si tenemos ganas, utilizarlas si lo necesitamos. Lo importante es saber que contamos con posibilidades.
Besos

estrella

hola amiga esto es muy ineresante, muchas veces he visto este tipo de espacios personalizados pero no entendia como le hacian ahora con tu informacion creo podre lograrlo, bueno amiga gracias por tus aportaciones tan utiles, besos y brazos y bendiciones con amor....luz estrella

Lujo

Hola CAS
Este post lo puse como apunte personal después de las pruebas que he ido haciendo.
Si sólo quieres crear el espacio te bastará con la primera parte y modificar por "yes".
Dependiendo del uso que le quieras dar, se deja a la imaginación añadir colores, fondos....etc..etc

La última parte es más para que tenga las mismas características que la sidebar.

Esto de modificar el blog es algo a largo plazo y tener ganas de hacerlo. Tómate tu tiempo.(^_-)
Abrazotes!


Re Hola LadyMarian
Ojalá muchos pensaran como tú. Lo importante es saber que se puede hacer una cosa y saber donde buscarlo.
Entender el funcionamiento cuesta. Todo es cuestión de tiempo, ganas y tomártelo de forma divertida.
Abrazotes hipervitaminados!

Lujo

Hola Estrella
En realidad estos temas son apuntes que realizo con cosas que he experimentado, aplicado varias veces y entendido su funcionamiento.
Nunca he pensado que pudiera interesar a alguien más.
El espacio se puede hacer y todo depende del uso e imaginación que tengas para crearlo.
Abrazotes!!

Vicky

Hola Lujo!
A la verdad, ya tenía agregado un crosscoll en la plantilla de uno de mis blogs, pero ya me estaba cansando verlo sin son ni ton, pues no sabía cómo personalizarlo y darle los estilos que yo quisiera.
Ya ahora que encontré tu post, me fue muy útil. Empecé por poner los estilos bases que nos das aquí, para luego empezar a modificarlos poco a poco, rato a rato.
Muchas gracias por compartir todas estas cosas.
Saludos!

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