Si queda claro como formamos bloques contenedores con DIV's, ahora nos interesa saber como generar una sección propiamente dicha. Como se dijo anteriormente, en cualquier otro tipo de página web no nos haría falta hacer nada más, pero como dice J.Miur, "Blogger habla lenguaje Blogger" y la cosa funciona mejor aquí, haciendo uso de las secciones.
Una sección sin contenido tiene un código muy simple...
<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION' />
Nota: Al no tener ningún gadget incluido, la sección se cierra con una contrabarra (/)antes del símbolo de cierre >, no necesitando una etiqueta </b:section>En la parte de HTML Si añadimos este código tal cual, por ejemplo dentro del
DIV denominado
MAIN-WRAPPER y justo debajo de la sección de las entradas, veremos desde
Elementos de Página como nos aparece un nuevo bloque en ese lugar para poder añadir los gadgets que queramos.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION'/>
</div>
La etiqueta
SECTION puede incluir un par de atributos interesantes:
- SHOWADDELEMENT: Sirve para que podamos añadir gadgets a cada sección. Su valor puede ser YES o NO. Si probais por ejemplo en la sección de la cabecera a cambiar el valor (normalmente viene en las plantillas ajustado como NO), vereis que aparece un nuevo recuadro arriba con el mensaje "Añadir un gadget". A partir de ese momento podeis generar nuevos gadgets ahí, que quedarán dentro del bloque de la cabecera. Esté se quedará encima de dicha cabecera, pero luego lo podreis mover. Ese mismo valor se puede cambiar en cualquier otra sección según nos interese. Puede no venir porque es opcional y caso de no ponerse, se entiende con valor YES.
- MAXWIDGETS: Máximo número de gadgets que admitirá la sección. Si no se coloca, el número de artilugios no tendrá un tope. Bueno, seguramente tenga un máximo, pero tan alto que lo desconozco por innecesario. También es modificable en otras secciones que vengan "de serie".
Aunque este otro es un atributo de la etiqueta
WIDGET, quizás sea oportuno que también lo conozcais:
- LOCKED: Sus valores son TRUE o FALSE y sirve para bloquear/desbloquear la posibilidad de mover gadgets desde Elementos de Página.
El nombre indicado tanto en el
ID del
DIV como en el de la sección (
SECTION), es realmente un selector de bloque. En el caso de las secciones, tiene que ser único, distinto para cada sección. Se genera en la parte CSS mediante una almohadilla (
#) seguida del nombre que le asignemos y sus atributos (ancho, color, etc.) encerrados entre llaves (
{}). Estos atributos afectarán a todo el bloque dentro de las etiquetas que lo incorporen. Como normalmente los atributos del
DIV ya están definidos, no suele hacer falta definir también el
ID de la
SECTION que queda dentro.
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Más interesante seguramente, es definir una clase (
CLASS) para cada sección. Eso nos permite dar un estilo individual a cada sección si fuera necesario. A diferencia de los
ID, las clases se generan con un punto (
.) delante del nombre de la clase. Por ejemplo, con el uso de clases, conseguimos diferenciar el aspecto del bloque de las entradas y el de la barra lateral.
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
Ver también:
13 comentarios:
Cordiales saludos Oloman.
Si me permites, desearía hacerte una consulta sobre un tema quizás ya viejo, pero que es nuevo para mi que comienzo en esto de los blogs.
Acabo de inaugurar mi blog y, siguiendo tus sabios consejos, he conseguido ocultar parte de mi primer post añadiendo el recurrido "leer más". el problema es que después del texto visible, me deja un enorme espacio hasta la siguiente entrada. como te digo el blog es nuevo y apenas hice modificaciones, solo en el encabezamiento.
Un cariño saludo desde Galicia.
Torpe de mi. Mi URL:
http://susurrosdearousa.blogspot.com/
Hola Susurros.
Te pasa lo siguiente: Cuando redactas el post, vas metiendo SPAN FULLPOST varias veces y entre esos SPAN, introduces saltos de línea (BR). Como los saltos de línea no están en la clase que esconde el texto (FULLPOST), pues estos (los saltos de línea) sí son visibles. Como son simplemente saltos, no se ve texto, pero evidentemente sí que hacen lo que tienen que hacer; dejar líneas en blanco.
Un trozo de tu código para que lo veas:
"...vocabulario.</span><br><br><span class="fullpost">Aquí es en donde..."
Todo lo que quieras "esconder" tiene que quedar encerrado por un único SPAN CLASS="FULLPOST" y su correspondiente cierre.
Ok. Muchísimas gracias de corazón. tengo que confesarte que una de las cosas que me animó a crear el Blog, fueron tus impagables ayuda en esta materia.
Un fuerte abrazo
Me salté tu comentario Rocanrol y me di cuenta ahora. Supongo que la eliminación del mensaje se debe a que has desistido de la idea que tenías, porque veo que sigues sin tener nada a los lados de la cabecera.
Si sigues queriendo colocar allí algo, dímelo.
Hola Oloman; muchas felicidades por tu blog, eres un experto. Tengo una pregunta. Me llama mucho la atención tu blog ya que tu sidebar de la derecha se encuentra sobre la parte principal (main) como haces eso? tengo un blog que estoy empezando y quisiera aplicarlo como lo tienes.
http://cursobilingue.blogspot.com/
Un Abrazo.
Leonardo
Es sólo un efecto de fondos Leonardo.
Hay un bloque principal (MAIN, en mi caso CONTENT)que tiene un ancho mayor del que a simple vista parece. El fondo que simula el cuaderno está alineado a la izquierda.
Luego hay dos columnas, la de los post y la sidebar. Esta última ocupa todo su ancho en algunas secciones y eso simula el que se salga del cuerpo principal, aunque realmente está totalmente dentro.
Para la etiqueta dónde van las fechas, ahí sí que se "saca" parcialmente del cuerpo principal usando el atributo POSITION.
hola Oloman de nuevo.
He hecho que me aparezca otro gadget encima de las entradas.Pero quisiera saber cómo hacer para poner debajo de la cabecera,en la misma medida que la cabecera.Gracias por tantos recursos y tu tiempo.
Nada, que ya está, no había leído la primera sección de estructura...listo.Gracias de nuevo
Pues no, no está del todo.Al quedar encima de la cabecera y como bien dices se puede cambiar pero ¿Cómo hago para ponerlo debajo de la cabecera??.Estoy buscando algo en tu página pero no encuentro.No sé cómo cambiarlo.Ya siento la lata :-)
Galileo, desde la Vista Elementos de Página, pinchas en el elemento y sin soltar el botón, arrastras debajo de la cabecera.
Como no lo veo, no sé si es eso, pero la otra opción es que hayas creado una nueva sección encima de la cabecera y entonces no lo podrás mover como te he indicado. En ese caso tienes que cambiar de sitio en la plantilla el código que generó la sección y ponerla debajo del de la cabecera.
Muchas gracias Oloman.Lo intentaré ;-)
PUBLICAR UN COMENTARIO