Plantilla Blogger. Crear secciones II. Atributos. | Oloblogger Si queda claro como formamos bloques contenedores con DIV 's, ahora nos interesa saber como generar una sección propiamente dicha. Como ...

12 de mayo de 2009

Plantilla Blogger. Crear secciones II. Atributos.

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:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

18 comentarios :

  1. 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.

    ResponderEliminar
  2. Torpe de mi. Mi URL:
    http://susurrosdearousa.blogspot.com/

    ResponderEliminar
  3. 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.

    ResponderEliminar
  4. 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

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. 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.

    ResponderEliminar
  7. 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

    ResponderEliminar
  8. 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.

    ResponderEliminar
  9. 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.

    ResponderEliminar
  10. Nada, que ya está, no había leído la primera sección de estructura...listo.Gracias de nuevo

    ResponderEliminar
  11. 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 :-)

    ResponderEliminar
  12. 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.

    ResponderEliminar
  13. Muchas gracias Oloman.Lo intentaré ;-)

    ResponderEliminar
  14. Hola, quiero crear un nuevo contenedor en el sidebar, pero no logro entender el tutorial yo uso la plantilla notepad chaos.

    http://img695.imageshack.us/img695/3474/dibujoat.jpg

    Estuve intentando pero parece que no esta bien.

    - en mi plantilla notepad chaos nose como agregarle los Links a las tres pestañas de arriba como el tuyo que dicen: Indice, enlazar, s ingenio.

    - Al pasar el mause por una pestaña de las que te menciono podria salir una imagen gif en medio de la pantalla ? y al retirar el mause de esa pestaña denuevo desaparesca.

    ResponderEliminar
  15. Hola. El error que te da es que tienes más de una sección con el mismo nombre. "NOMBRE_SECCION" es un dato que tienes que cambiar por un nombre que tú le pongas. Posiblemente has usado dos veces este ejemplo y de ahí el problema. Con "CLASE_ESTILO" ocurre más o menos lo mismo, aunque eso no te provocará ningún error.

    Con respecto a los links del menú, tienes que bajarte la imagen que forma ese menú, editarla y volverla a subir con los nombres (realmente dibujos) que tú quieras.

    Para lo último que comentas, tendrías que ver esta entrada. En lugar de poner el enlace en la pestaña lateral que allí se dice, simplemente lo pones en una de las de arriba.

    ResponderEliminar
  16. Hola oloblogger, en notepad chaos al agregar un gadget al Footer y visualizarlo en el blog no aparece creo y que se baja tanto que ni se ve.

    Como logras el efecto que tienen los botones de abajo al pasar por tu medalla roja parece que se undiese un poco.

    como centro la caja de comentarios ?

    Como logras que no se descuadre tu blog en IE6 ?
    el mio descordina con el fondo al verlo en IE6

    gracias por tus proximas respuestas y te deseo una Feliz Navidad !! Feliz Navidad!! .

    ResponderEliminar
  17. Hola
    - Sin un enlace a tu blog, no te puedo ayudar, porque ya no tengo el footer original y no recuerdo como era
    - Para lo de los botones, lo explicamos en rollover sencillo con imágenes sencillas
    - La caja de comentarios se centra, con la clase .comment-form. Si no la tienes, la añades y la configuras. Ver entrada.
    - Lo de que el blog no descuadre es cuestión complicada y depende totalmente de cada plantilla.

    Feliz Navidad.

    ResponderEliminar
  18. Un millón de gracias, me salvaste la vida :)

    ResponderEliminar