71

Aprovechando espacios en la plantilla (crosscol)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Me llegaba ayer un email (por cierto sin firmar) donde alguien me preguntaba si podía explicarle que significaba una parte del código de su plantilla, que aparecía justo sobre esta línea:
<div id='content-wrapper'>


El código del que estamos hablando, y que Blogger incluye por defecto en sus plantillas, es este:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


Esta parte de la plantilla se llama crosscol-wrapper, y tal como lo podemos ver en nuestra plantilla no está habilitado para su uso, pero podemos hacerlo con facilidad para mostrar en el, como en mi caso, un menu horizontal o las etiquetas del blog, por ejemplo.

Para habilitar el crosscol y que este se vea en la parte de diseño como un elemento más (Gadget), cambiamos en su código el showaddelement='no' por showaddelement='yes' .

Ahora ya estará listo para incluir en el cualquier elemento e incluso varios elementos:


Podemos también añadirle alguna propiedad mediante CSS, para ponerle por ejemplo, fondo de un color determinado, borde, tamaño de texto, margenes, etc.

Incluimos el CSS antes de ]]></b:skin> (como ejemplo este es el que uso yo en el blog):

#crosscol-wrapper{
background:#FFF;
margin-top:5px;
border:2px solid #a6c4e1;
padding:2px;
}


Entradas Relacionadas:

71 comentarios:


Anónimo

Excelente, muy bueno.=

Me ha gustado, ademças que permite mças opcionesªªª.=

Saludos Ro!!!.

Mary Lovecraft

Ay! no sé qué pasó que no salió mi mensaje!!

te decía Rosita que con tus explicaciones todo es tan fácil!! ahora lo veo bien clarito! se agradecen entre tanto truquito, unas cuantas 'clases teóricas magistrales' puras y duras (y didácticas como siempre!) entre unos y otros!!
un besito linda, que pases buena noche!!;)

Unknown

Holitas!!
me e leido creo q casi todo tu blog y me ha encnatado, ademas q me lo recomnedaron jijiji, pue smi DUDOTA!! es q todo esos codigos para pobnerlos donde tengoq entrar?? osea donde hay q metersse no logro entender eso, y donde crei q era pues no me modifico nada dnada....disculpa las molestias y muchas gracias por ayudar!!

Rosy
Chile!

Raquel

Lo he probado y funciona pero lo que de verdad me gustaria es tener unas pestañas como tienes tu... si pudieras orientarme ;-) gracias.

Anónimo

Hola rosa, como se pone el truco que tu tienes el que sale una nubecita numerando la entrada? esque lo querria poner en mi blog.
gracias, un saludo,
Miguel Fernández

Mijel MX

Muy bueno y muy sencillo de hacer... gracias!

Pily

Un truco fàcil de hacer y muy pràctico. Ya lo activè para poner la cuenta regresiva para mi cuemple.

Muchas gracias¡¡ :D

Antony

Hola!

Bueno yo se lo quite a mi plantilla porque no le vi ciencia, pero ahora que me lo explicas, creo que lo pondré de nuevo.

Saludos!

Unknown

Hola Rosa :)
Yo tengo puesto la tabla de anuncios que un día nos mostraste en tus ayudas, me conviene quitarla y dejar el crosscol, o bien eliminar esta parte?
Muchos besos y un abrazote
pd: espero que ya hayas terminado de pelear con el pc ;)

Anónimo

¡No consigo publicar mis comentarios!Quería saber qué debo hacer para poder utilizar los iconos que me he descargado para mis alumnos. No sé qué es lo que hacemos mal. Parece ser que tiene algo que ver con el formato de los iconos (¿PNG?). Perdón por la ignorancia. Gracias, Rosa.

Anónimo

Miguel Fernández, en breve publicaré sobre eso. :-)

Anónimo

Mijel GLLV , gracias ;-)

Anónimo

Pilyboop , tendré que pasarme a ver cuando es tu cumple, je,je.

Anónimo

Antony, pues útil en ocasiones, dependiendo del diseño de la plantilla...en algunos quedan fatal los menús tan pegados al header, con el crosscol quedan mejor, creo yo.

Anónimo

Σ=o) Pau , ambas cosas son parecidas...podrías mantener ambas, independientemenete de si las usas o no...cuestión de necesidades o gustos de cada uno...:-L

Anónimo

Arancha, hoy es complicado dejar comentarios...algo anda mal en Blogger o Googgle.

Supongo que el problema a que te refieres es que no se ven...si es así, supongo que será por el formato, ya que los png dan problemas de "no visualización" en algunas versiones de IExplorer.

Anónimo

Rosy, en tu panel de Blogger, pestaña Diseño y luego "Edición Html" es donde se ve todo el código de tu plantilla.

Anónimo

Muchas gracias por tus consejos! son de mucha ayuda.

Saludos desde Argentina

Anónimo

Perdón, Rosa. No me expliqué bien. Los iconos no son para el blog (todavía no se lo he presentado a los chicos). Mis alumnos quieren usar los iconos en los Tablets PC con los que trabajan en clase. Les gustaría sustituir los que identifican cada carpeta de sus trabajos por otros "más chulos". Gracias de todos modos.

Anónimo

Rosi no había visto ésta parte de la plantilla...no he visto tantas jajaja...ya iré a ver, besitos mi vida!!!

Charles Francis

Estimada Rosa:

Acabo de ver su Blog y me gustaría que me de una idea y creo que se debe poder en cuanto que he visto como usted tiene registradas las diferentes entradas en la parte superior y a la derecha de su página de entrada principal.
Ejemplo:
Superior.
Blogger Boton de enlace Buscadores Comentarios Cosas mias Datos utiles Emoticones etc.

• Inicio Contacto Suscribe Feed Sobre mi Ver todas las entradas etc.


Derecha
LEER COMUNICADO
Sigueme en Twuiter
Blogger Archivos
Archivos del Blog
Etc.

Yo quiera darle al formato a mi Blof algo parecido y que se visualice lo mismo respecto a lo que yo considere necesario que se observe cuando el lector entre al Blog.
Y que el lector al entrar a la página principal, aparte de ver lo que yo quiera publicar en el inicio al Chat, observe en algún lugar de la página títulos así como en el suyo y puedan ser desplegados por ellos mismos, y entonces no se vean todos ya desplegados en la pagina principal de mi blog como están hasta hoy.

Agradeciendo desde ya, aprovecho la oportunidad para felicitarla por su Blog y saluidarla muy cordialmente.-
Mi Blog es www.chatero-elchat.blogspot.com
y mi e-mail: chatero_08@yahoo.com
El Chatero

Anónimo

Chatero , eso que ves en la parte superior, es una nube de etiquetas como esta:

http://elescaparatederosa.blogspot.com/2008/01/nube-de-etiquetas.html

Debajo uso un menú como este:
http://elescaparatederosa.blogspot.com/2008/10/menu-de-pestaas-invertidas.html

Y en la sidebar de la derecha, pues los archivos y demás...

No entendí bien lo que quieres, pero el diseño del blog has de ir haciéndolo poco apoco usando lo que te guste...

Beauty Inferno

Hola!
Llegue buscando un truco para mi sitio y me encontre con tu blog, te felicito tienes cosas bastante interesantes y bien explicadas... llevo un rato mirando las entradas :P, ando de intrusa.

Ya que veo que respondes los mensajes que los usuarios escribire mis dudas :P.

Primero, sobre esta opcion, justo ayer cambie de template (tenia el Minima Black), y este template nuevo al parecer no tiene el codigo crosscol... lo queria para probar el menu superior que publicaste en otra entrada.
Sabes si es posible agregarlo nuevamente??, basta con el codigo que tu publicaste o habria que hacer más cambios?.

Tambien me intereso un codigo que usas en tu blog el de "! leer comunicado", en mi sitio tengo algunos texto escritos en el sidebar y son muy extensos por lo que es antiestetico y baja el resto del contenido, si pudieras darmelo o decir donde lo consigo estaría muy agradecida.

Saludos

Anónimo

Beauty, claro que respondo :-) no te quepa duda.

Si, así es, puedes volver a añadir el crosscol siguiendo las indicaciones de esta entrada.

En cuanto al código que me solicitas del "comunicado" puedes ver como hacerlo en esta entrada:
http://elescaparatederosa.blogspot.com/2007/11/mostrar-y-ocultar.html

Gracias por pasarte ;-)

Beauty Inferno

Gracias!!!
Ahora mismo lo implemento ;).

Y una ultima pregunta (creo xD), como haces esa "nube" de links de diferentes sitios??? (el que se llama imprescindibles), para linkearte allí, es mas que nada porque siempre hay sitios muy buenos y utiles aunque fuera del contexto del blog (yo suelo enlazar sitios con tematicas similares al mío).

Bueno que estes bien saludos y felicitaciones por el blog :).

Tamara

Anónimo

Beauty, pues así la hago ;-)
http://elescaparatederosa.blogspot.com/2008/05/enlaces-en-forma-de-nube.html

J. Enrique Olivera Arce

Rosita:
A mi edad y limitados conocimientos, resulta complicado entender y más aún modificar o agregar elementos a la plantilla de mi blog, como poner un contador de visitas, por lo que haber encontrado tu sitio me será de gran utilidad. Gracias

Anónimo

Hola Rosa; felicidades por el blog. Te quiero hacer una consulta tras la descarga de un template que lleva incorporado etiquetas, observo que a pesar de seguir las indicaciones del blogger no están activas y a clickearlas me informa que el blog no existe. Está en una fase de construcción pues quiero desarrollar la estructura del blog y luego añadir el contenido. Te dejo mi dirección para que le puedas echar un vistazo y me dices donde te parece que está el error. Mil gracias

http://untechoenelaire.blogspot.com/

Anónimo

glups...perdón,... se me olvidó añadir que seguí tu s consejos de arriba sin resultados.

Saludos.

Anónimo

Pedro

Es dificil comprobar algo así con solo una entrada, pero en principio te diría que si funcionan, en la sidebar pinchas en la única etiqueta que tiene esa entrada y va a dicha etiqueta.

Si a lo que te refieres es que no se ven debajo de la entrada, eso has de activarlo en la parte de "Diseño" en la cajita que pone "Entradas del blog" pinchas en el enlace de "editar" y has de marcar la opción etiquetas.

Yo no me preocuparía por eso ahora, de hecho, creo que eso sería mucho más adecuado hacerlo una vez hayas publicado alguna entrada...Pon en marcha el blog y luego ya irás añadiendo esas cosillas...No me agrada ayudar a blogs de pruebas, que no es seguro que vayan a funcionar nunca...

Anónimo

Ok muchas gracias, en un principio me refería a las pestañas de arriba donde pone Home, video, pictures. De todas formas iré avanzando el blog y la puesta en marcha y si persiste el problema te volveré a informar.
Gracias

Proletario

Hola Rosa, cambie el no por el si, pero ahora no entiendo, como hago para agregarlo donde yo quiera?

Anónimo

ALMOGAVAR , no es agregarlo donde quieras...el crosscoll se verá ahora debajo de tu cabecera, tienes ahí la posibilidad de añadir Gadget, que antes no tenías...

Flores Literarias

hola Rosa soy nueva por acá... puedes porfis indicarme cómo encierro mis enlaces en una cajita como los tienes vos. Te agradezco tu colaboración, gracias

Anónimo

flores literarias, puedes ver como hacer eso en esta entrada:
http://elescaparatederosa.blogspot.com/2007/01/entradas-y-widget-enmarcados-por.html

MARGA'S HAPPY CRAFTS

Rosa, he puesto este codigo, y me funciona bien, pero no me aparece la imagen de fondo

#crosscol-wrapper{
background:#FFF;url(http://lh4.ggpht.com/_Eg-JPwWnV5E/SRZABIV9beI/AAAAAAAAAKU/gk3enahCAps/s144/cutecolorsquiltbg4.gif.jpg);
margin-top:5px;
border:2px solid #a6c4e1;
padding:2px;
}

Donde puede estar el error?
Gracias.

Anónimo

MARGA, hay un punto y como que le cierra el paso a la imagen, justo después de #FFF, tienes que eliminarlo:

#crosscol-wrapper{
background:#FFF;url(http://lh4.ggpht.com/_Eg-JPwWnV5E/SRZABIV9beI/AAAAAAAAAKU/gk3enahCAps/s144/cutecolorsquiltbg4.gif.jpg);
margin-top:5px;
border:2px solid #a6c4e1;
padding:2px;
}

MARGA'S HAPPY CRAFTS

Rosa, muchas gracias, con tu ayuda los blogs, son una gozada.
Un beso.

Un Perro

Hola Rosa, ya tengo el crosscol listo y esperando.
hice unas búsquedas y no pude encontrar el menu dos (robs), ese me encanto!. vi el código fuente y me pareció como leer Mandarín :-|
espero que vea la luz pronto.:)
un beso grande

Un Perro

bueno ya tengo el crosscol añadido, esperando por un menú del estilo (robs) Me encanto!!!
un menú que despliegue submenu al pasar el puntero.
ya ha visto la luz Rosa ? por que lo busque en todo el escaparate y no lo pude encontrar.
un beso grande

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

Anónimo

Un perro, pues no, no está:D creo que "por petición popular" tendré que darme prisa en sacarlo a la luz, como tu dices, je,je.

Un Perro

estare esperando ese menu (robs) ansioso :D
un beso grande Rosa

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

Andrés Álvarez F.

Hola muy buenas. Realmente he tenido problemas para hacer funcionar, y entender como funciona, el susodicho crosscol. Pobrando diversas modalidades de menú me queda un espacio entre la cabecera y el inicio de los post bastante horrible. A ver que he hecho mal esta vez...

Anónimo

Andrés, el "susodicho scroll" no es más que otra sección de la plantilla como puede ser la sidebar o el footer. No viene de serie en las plantillas funcionando, pero está ahí, y tiene las mismas propiedades que cualquiera de las secciones de la plantilla.
Esa distancia, o parte de ella es del padding del menu:
padding: 0px 10px 0px 10px;

Reduce a 0 en el último 10 o en ambos.

Andrés Álvarez F.

Para ver si había solucionado ya definitivamente el tema del espacio (entre el menú y el inicio de las entradas) del que hablaba ayer instalé otro menú, el CSSPlay Nº4, y aún haciéndole cambios en todo aquello que entendí que podía afectar al citado espacio, no logré nada :(

Espero no ser cansino, pero es que la verdad no se me ocurre nada que pueda solucionar el problema.

Saludos.

FMFSCOSLADA

Buenas tardes Rosa:
Ya te tengo enlazada, pero no me canso de ver tus novedades.
Un saludo.

Anónimo

Andrés,¿exactamente que quieres? ¿El menú pegado a 0 sobre las entradas y la sidebar?
Tal com lo veo yo ahora está correcto, ya que la única separación es la que da la imagen que rodea las entradas (esa raya blanca).

Anónimo

F.M.F.S. COSLADA-SAN FERNANDO , gracias cielo! :D

Andrés Álvarez F.

Cierto, resulta que con la cuenta puesta se ve un espacio considerable en azul que afea el blog. Pero entrando desde Internet Explorer o desde el Mozilla sin haber accedido a la cuenta de Blogger se ve bien.

Gracias por todo y perdón por preguntar tanto :)

Anónimo

Andrés, ah claro, era eso...:D Si, cuando estás logueado en Blogger las secciones del blog se ven muy separadas, incluso podrían verse "descorregidas" pero eso es así.

Turi

Rosa, en la plantilla TicTac de Blogger no viene lo de crosscol, así que este método no funciona . Lo de "showaddelement" sí que aparece en content-wrapper y header-wrapper, pero aún poniéndolo a "yes" no funciona. ¿Se te ocurre alguna solución?

Un saludo a tod@s.

Anónimo

Turi De "serie" si viene. Probablemente lo hayas retirado en alguna modificación anterior de tu plantilla.
No es problema, puedes volver a colocarlo.
Localiza esta línea:
<div id='content-wrapper'>

Y justo debajo añade el código para el crosscol:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='no'/>
</div>

Guardas los cambios y ya podrás usar lanueva sección.

Ana Gonzalez

Hola Rosa:
Antes que nada muchas gracias, porque el blog lo tengo mas o menos bien, por lo que tu has ido explicando aqui.
Mira me gustaria añadir en mi blog lo mismo que tienes tu a la derecha de este. Se llama quizas ¿Sidebar? vale, pero me gustaria poner imagenes que fueran cambiando, aunque esto ultimo es secundario.

Anónimo

Ana Nada más fácil que usar una plantilla de Blogger, la Mínima por ejemplo, que ya tiene la sidebar incluida...

B

Hola Rosa

Uso la plantilla de blogger son of moto y no me gusta que no se aproveche toda la pantalla...los textos me quedan kilométricos.

¿Cómo puedo ampliar el espacio disponible para los textos de las entradas?

Ah, no tengo ni idea de HTML, mil gracias

http://bichejosonriente.blogspot.com

Anónimo

Bichejo Mira en esta entrada, y no necesitas más que saber encontrar, copiar y pegar códigos :D

http://elescaparatederosa.blogspot.com/2007/12/ensanchar-la-plantilla-sound-of-moto.html

Un Perro

Hola Rosa, bueno que sigo jugando, pero ahora con mi niño mimado, el blog de Marea, he creado un nuevo background, pero para que se pueda lucir debo bajar la sidebar, la widebar, el main y el crosscoll, bueno, he logrado bajar todos menos el crosscoll, probe creando una llamada para crosscoll-wraper aplicandole debajo el paddin-top, al igual que con las demas secciones, si bien conseguí que el crosscoll bajara respecto al top del blog, el "menu dos ROBS" que tengo implementado en dicho crosscoll sufre una desestructura, lo veo si, pero en forma de lista de etiquetas.
He probado agregando la llamada al crosscoll-wrapper desde la sección Outer-wrapper, desde ahí se produce el problema.
Luego intente poniendo la llamada, por encima del /b:skin, desde ahí, no se produce ningún cambio aparente.
Debo aplicar nuevamente el código para el menú ? luego de poner las llamadas con padding-top del crosscol ?
Sin dudas algo estoy haciendo mal.
:S:S
Un beso Rosa

Un Perro

me he dado cuenta que el bravucón del crosscoll se resiste firmemente a todas mis trastocadas :(...
Este si me ha ganado completamente

Anónimo

Un perro Tendrías que añadirlo antes de ]]></b:skin> más o menos así:

#crosscol-wrapper{
margin-top: 50px;
}

El padding se usa para separar el contenido del borde, es decir en este caso el menú.
En cambio el margin lo que separa es el contenedor (en este caso el crosscol) del elemento más cercano, al ser top (arriba) sería del header.

Anónimo

Un perro Se han cruzado nuestros comentarios :D

Un Perro

jajaja,:D es en estos momentos que me gustaría que existiera la posibilidad de "volver atrás" y borrar comentario, casi el unisono, frustración y solución al mismo tiempo. :D
Queda de maravilla, ahora lo que me doy cuenta es que puedo prescindir de efectuar cambios con las demás secciones, por lo que vi el crosscoll se arrastra el main, la widebar y las sidebar a la medida que se especifique.
Genial ! simplemente Genial !
un beso grande Rosa :D

Anónimo

Un perro Así es. Cada sección puede controlarse por separado si se necesita, pero tanto el header como el crosscol "empujan" al resto del contenido.

Anónimo

Rosa necesito que me orientes;tengo en mi blog un menu que viene por defecto,tambien tengo habilitado el crosscol.Como puedo meter ese menu dentro del crosscol para que me deje el header libre?Si una vez instalado le aplico marging-top,ese margen se aplica tanto hacia el header como hacia el bloque de los post?

Rosa

Juan Martin Tendrás que copiar de tu plantilla todo el código HTML del menú, eliminarlo después de donde estaba, y colocarlo en un gadget del crosscol.
El margin-top tal como el top indica, es la separación de lo que sea a lo que está arriba de el, para separarlo de la parte de abajo, sería margin-bottom

Anónimo

gracias Rosa,pero sigo con dudas.Se podría colocar en la plantilla dentro de este codigo:"div id='outer-wrapper'><div id='wrap2'" y tendría que cambiar el titulo al Css no ?
Perdoname por mi ignorancia Rosa ,ya es que estoy hecho un lio con tanto codigo,gracias de nuevo.

Rosa

Juan Martin Puedes colocarlo directamente en la plantilla y supongo que después de ese código estaría bien... aunque no se decirte ya que cada plantilla es un mundo... y NO, independientemente de donde vaya colocado no hay que cambiar nada en su código.

Anónimo

Muchas gracias Rosa,cuando tenga un rato me pongo a ello,un saludo.

Unknown

Hola encontre este blof buscando ayuda para agregar 3 columnas, hace rato que por suerte descubri este mundo y cada dia que pasa me fascina mas...y mas.. gracias por compartir todo esto con nosotros, la gente dice que yo se mucho pero al lado tuyo no se nada! Todo lo que pones es muy pero muy util gracias por compartirlo y gracias por tomarte la molestia de anotar todo tan detalladamente bien. voy a seguir varios de tus consejos. y estoy poniendo a la vez muchas cosas nuevas en mi pagina. Un beso.

Anónimo

Marian Un saludo! :D
En lo que yo pueda, ya sabes donde encontrarme... ;)

del batitú

Hola Rosa, cómo estás? tengo una duda con respecto al crosscol. en un blog de pruebas agregué una presentación de un álbum de picassa en esa sección, tal como tengo en la sidebar de mi blog principal. Ahora el tema es que la presentación en el crosscol queda de igual tamaño que la de la sidebar, y como esta nueva está debajo de la cebecera, quedaría mucho mejor si las fotos se vieran más grandes. Es posible agrandarlas Rosa?
probando
Gracias mil, como siempre

Anónimo

del batitú Ni idea... tendrás que preguntar en donde tomaste el código y el sistema para hacer esa presentación.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S