Secciones con estilo I Intercalar y formatear una nueva sección en sidebar. | Oloblogger Ya habeis preguntado en muchas ocasiones, cómo hacer que se desplieguen ciertas partes de la barra l...

24 de agosto de 2009

Secciones con estilo I Intercalar y formatear una nueva sección en sidebar.

Ya habeis preguntado en muchas ocasiones, cómo hacer que se desplieguen ciertas partes de la barra lateral, para que no permanezcan enteramente a la vista. También cómo poner un fondo distinto sólo en un trozo. Vamos a intentar explicar en este post, cómo hacer ambas cosas al mismo tiempo.

Para hacer una sección "especial", primero hay que crearla, tal y como se vió anteriormente. Para ello, lo más cómodo es editar la plantilla sin expandir artilugios. El lugar dónde insertar la sección variará según las plantillas, pero tiene que ser debajo o arriba de la sección que corresponda a la sidebar. La primera línea es la que se ha añadido para crear la nueva sección.

<b:section class='pergamino' id='upsidebar' />

<div class='links'>
<b:section id='sidebar1' showaddelement='yes'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>
</div>

Las palabras en verde pueden ser modificadas por las que considereis oportuno. En esta explicación se han incluido con un nombre concreto para poderles seguir la pista.

Con respecto a la clase (CLASS) que es la que dará estilo a la sección, la podeis encontrar en un DIV que engloba toda la sección y sus artilugios (llamada LINKS en el anterior ejemplo) o directamente incorporada a la sección, tal y como hemos hecho nosotros con la que hemos insertado (clase PERGAMINO en el elemento con ID UPSIDEBAR).

En el primer ejemplo, la sección nueva saldrá justo encima de la sidebar. Colocarla debajo se hace con el mismo procedimiento, pero colocarla en el medio ya es algo más complicado y es precisamente cómo lo vamos a hacer.

Para eso, habrá que generar una nueva sección idéntica a la sidebar original, con la misma clase de estilo para no tener que trabajar mucho, pero con distinta ID. De esta manera, se verá la barra lateral, a continuación la sección especial y de nuevo la barra lateral. Realmente serán dos secciones de sidebar distintas pero con el mismo estilo y en medio la sección nueva insertada.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' >
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>

<b:section class='pergamino' id='mediosidebar' />

<b:section class='sidebar' id='sidebar2' />

</div>

Una vez creada(s) la(s) sección(es) correspondiente(s), grabamos y ya podremos ver desde Elementos de Página algo así:


Nos falta crear el estilo que queremos para la clase de la nueva sección. Editamos de nuevo la plantilla y la creamos en la parte CSS con el mismo nombre que le dimos anteriormente. En nuestro ejemplo PERGAMINO. En una versión básica, le daremos un poco de margen interno para que el contenido no quede pegado a los bordes (PADDING) y le pondremos un fondo distinto al del resto de la sidebar:

.pergamino {
padding:5px;
background:url(DIRECCION_IMAGEN_FONDO);
}

Luego veremos cómo hacerlo un poco más complicado...

¿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

31 comentarios :

  1. Me guardo tu blog en mis favoritos, conocía otros blogs como El Escaparate de Rosa, Vagabundia, Gemma Blog, etc, pero del tuyo me sonana el nombre. Que bien que lo he descubierto. Aprovecho para preguntarte como se hacen, si sabes, cómo se ponen emoticones en blogger. Lo he intentado con un truco de Rosa pero no me sale. Algo debo estar haciendo mal.

    También aprovecho Felicidades por el blog. Me descubro antes los que nos ayudáis a trastear por blogger. Gracias!!! Te deseo mucha suerte en los Premios 20 Blogs. Yo también participo en ellos y me gustaría que visitaras mi blog http://alareiramaxica.blogspot.com/

    La categoría en la que concurso es la de mejor blog en versión original Tiene un poco de todo: música, humor, relatos, recuerdos, actualidad, etc. Y también tienes la posibilidad es escuchar mucha música online y cuenas con útiles enlaces o links. Recuerda que no te puede gustar lo que no conoces, así que prueba, sólo prueba, a visitar el blog.

    En conciencia, si tras visitarlo crees que se merece un voto, pues vótalo, sino no lo hagas.Me interesa dar a conocer mi blog y conseguir máis lectores y/o colaboradores para A Lareira Máxica, por lo que te invito a participar en el blog en forma de comentarios o envío de artículos.
    Un saludo, y lo dicho, suerte en los 20 Blogs.
    P.D. El blog cuenta con un servicio de traducción español-gallego arriba de todo, donde dice “traductor” arriba a la izquierda

    ResponderEliminar
  2. Vas pisándole los talones a "lo que me toca los cojones"... ÁNIMO!!!

    ResponderEliminar
  3. Extraordinario tu blog, me ha sacado de algunos apuros. Si no es mucha molestia, ¿como puedo colocar una categoría en una pagina distinta a la principal de mi blog?.
    Mil gracias por tu atención.
    Mi blog:
    www.educarweb.blogspot.com

    ResponderEliminar
  4. @Julio Torres, hace tiempo probé un script que proopusieron en Vagabundia y funcionaba bien. Este es el enlace.

    @Encar, ánimo tenemos, pero está difícil la cosa.

    @Orlando Colina, no entiendo bien lo que quieres hacer ¿que tal si me pones un ejemplo?

    ResponderEliminar
  5. Hola oloblogger bueno ahora t escribo en este post :D
    Qusiera que los post estubieran mas cerca de el menu o mas bien el titulo del blos se supone que es aca:

    .red #slatenav {
    position: relative;
    display: block;
    height: 42px;

    pero cambio ese numero y no surge ningun cambio
    Un saludo
    MR

    ResponderEliminar
  6. MR no sé en que blog quieres modificar eso, porque en los que tengo tuyos no veo menú y título seguidos. En todos hay una presentación por en medio. No puedo comprobar si es esa clase o no, pero en un principio, por el nombre (nav) parece más bien una clase del menú.

    ResponderEliminar
  7. Rodri, en tu caso tendrías que crear la clase pergamino con el fondo que quieres y luego buscar (artilugios expandidos) el widget con id=label1. Luego añádele dentro de WIDGET, class='pergamino'
    Eso te hace un fondo de tamaño fijo. Para hacerlo de tamaño variable, tendrás que seguir viendo los siguientes posts sobre este tema.
    Si al previsualizar te cierra la ventana, es porque tienes código de más o de menos: algunas comillas, algún < que falta o cosas así.

    ResponderEliminar
  8. No se hacer esto: crear la clase pergamino con el fondo que quieres. A que te referis con crear? Ya tengo la imagen del pergamino que quiero.
    Lo otro ya lo agregue.

    ResponderEliminar
  9. Crear la clase en el código de tu plantilla. De esa manera, cuando pongas algo y le añadas class="pergamino", le aplicará lo que hayas definido en esa clase. En este caso, un fondo con un dibujo. Espero que hayas leído este post para entender un poco mejor lo que te voy diciendo.

    ResponderEliminar
  10. mmm, ni idea.
    sisi lo lei, sino no hay drama. explicarlo asi capaz q es mas dificil, si tendria a alguien al lado o ver como se hace lo sacaria al toque. pero bueno. Soy novato en esto, x eso.

    ResponderEliminar
  11. x ejemplo, agrego el codigo de arriba:
    etc.

    Y cuando pongo vista previa me dice error.

    ResponderEliminar
  12. Primero:
    Antes de /b:skin, insertas esto sustituyendo DIRECCION_IMAGEN_FONDO por la tuya
    .pergamino {
    padding:5px;
    background:url(DIRECCION_IMAGEN_FONDO);
    }
    Segundo: Buscas (artilugios expandidos) el widget LABEL1 y dentro del tag WIDGET, añades class='pergamino'

    ResponderEliminar
  13. disculpa q sea tan molesto, jeje es q no se.
    No se que es /b:skin no lo encuentro.
    Me quedaria asi:
    .pergamino {
    padding:5px;
    background:url(http://img5.xooimage.com/files/a/b/9/pergamino-16e2243.gif);
    }
    pero antes de donde?

    ResponderEliminar
  14. Todo lo que te dije hay que ponerlo en tu plantilla: Edición HTML

    ResponderEliminar
  15. ya se. ya lo agregue perfectamente como me dijiste. pero pongo vista previa y no aparce. Ya fue, me rindo. asi no te molesto mas. Grax x la ayuda y la paciencia! Nos vemos!

    ResponderEliminar
  16. Creo que te falta añadir la clase a la sección, lo que indiqué como "segundo".

    ResponderEliminar
  17. hice todo, y no queda... mira mi blog www.lospibesjvn.blogspot.com capaz q es xq la sidebar tine fondo de color. pero mira mi blog.

    ResponderEliminar
  18. Yo sigo sin verla. Haz una copia de seguridad de tu plantilla y mándame por correo el fichero .xml que te sale.

    ResponderEliminar
  19. ya esta. te la mande a cosicas.oloman@gmail.com

    ResponderEliminar
  20. Ok. Recibido y contestado.

    ResponderEliminar
  21. te lo resp. muchas gracias!

    ResponderEliminar
  22. Hola oloman,quisiera saber,por favor,como colocar una nueva sección sóbre la sidebar existente,para poder colocar nuevos gadget. (que la nueva "sección" séa independiente de la "sidebar" y que se encuéntre "sobre" la misma)espéro que me entiéndas je muchas gracias. chris...

    ResponderEliminar
  23. Hola Nochesamarillasg

    Creo que debes tener algo así en tu código (sin artilugios expandidos):

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar1' />

    Si es así, sólo añade entre esas dos líneas o, en cualquier caso delante de la segunda, esta otra:

    <b:section class='sidebar' id='sidebar2' />

    ResponderEliminar
  24. muchas gracias por tu respuesta oloman,te lo agradézco,tu blog es exelente!!

    ResponderEliminar
  25. abra algun codigo que redusca el alto de los widget entre si para que este juntos (heigth)

    ResponderEliminar
  26. Nagato, no entiendo muy bien lo que quieres decir, pero si es lo que supongo, bastaría con dejar el padding y el margin de esos widgets a cero. Al menos los top y bottom.

    ResponderEliminar
  27. Quiero darte las gracias por todo lo que nos enseñas, para mi es de mucha utilidad y siempre que tengo alguna duda me dirijo a tu blog
    Esta entrada en particular la estoy disfrutando pero todavia no la pongo en practica ya que estaba buscando una imagen que se adapte a mis necesidades
    En mi búsqueda encontré esta pagina que esta en ruso, pero como es solo de imágenes es fácil navegar en ella y quiero compartirla con ustedes, tiene muchas imágenes y todas en formato PNG, que suelen ser de mucha utilidad a la hora de cambiar el aspecto de nuestro Blog
    Pagina: http://www.lenagold.ru/fon/clipart/alf.html
    Pergaminos: http://www.lenagold.ru/fon/clipart/b/bum.html
    Muchas gracias, que disfrutes de una linda semana.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Patry. Daremos buena cuenta de ella :)

      Eliminar
  28. Estoy intentando montar mi blog y quisiera hacer esto mismo que publicas en esta entrada, pero aplicando a las nuevas plantillas de blogger, pero no se como localizar cada una de estas zonas, en estas nuevas plantillas. Gracias. Tu blog me parece realmente bueno.

    ResponderEliminar
    Respuestas
    1. Hola. Las plantillas del nuevo diseñador tienen secciones (section) y gadgets (widgets) exactamente de la misma manera que las otras. Quizás te refieres a las dinámicas, pero en esas no se puede cambiar casi nada.

      Eliminar
    2. Gracias por la respuesta, sí me refería precisamente a eso a las dinámicas.

      Eliminar