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>
<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>
<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);
}
padding:5px;
background:url(DIRECCION_IMAGEN_FONDO);
}
Luego veremos cómo hacerlo un poco más complicado...
- Secciones con estilo II. Fondos cuando la longitud es variable.
- Secciones con estilo III Plegar y desplegar.
¿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.
Y muchos más artículos interesantes si nos sigues en...
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.
ResponderEliminarTambié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
Vas pisándole los talones a "lo que me toca los cojones"... ÁNIMO!!!
ResponderEliminarExtraordinario 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?.
ResponderEliminarMil gracias por tu atención.
Mi blog:
www.educarweb.blogspot.com
@Julio Torres, hace tiempo probé un script que proopusieron en Vagabundia y funcionaba bien. Este es el enlace.
ResponderEliminar@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?
Hola oloblogger bueno ahora t escribo en este post :D
ResponderEliminarQusiera 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
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ú.
ResponderEliminarRodri, 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'
ResponderEliminarEso 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í.
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.
ResponderEliminarLo otro ya lo agregue.
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.
ResponderEliminarmmm, ni idea.
ResponderEliminarsisi 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.
x ejemplo, agrego el codigo de arriba:
ResponderEliminaretc.
Y cuando pongo vista previa me dice error.
Primero:
ResponderEliminarAntes 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'
disculpa q sea tan molesto, jeje es q no se.
ResponderEliminarNo 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?
Todo lo que te dije hay que ponerlo en tu plantilla: Edición HTML
ResponderEliminarya 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!
ResponderEliminarCreo que te falta añadir la clase a la sección, lo que indiqué como "segundo".
ResponderEliminarhice 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.
ResponderEliminarYo sigo sin verla. Haz una copia de seguridad de tu plantilla y mándame por correo el fichero .xml que te sale.
ResponderEliminarya esta. te la mande a cosicas.oloman@gmail.com
ResponderEliminarOk. Recibido y contestado.
ResponderEliminarte lo resp. muchas gracias!
ResponderEliminarHola 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...
ResponderEliminarHola Nochesamarillasg
ResponderEliminarCreo 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' />
muchas gracias por tu respuesta oloman,te lo agradézco,tu blog es exelente!!
ResponderEliminarabra algun codigo que redusca el alto de los widget entre si para que este juntos (heigth)
ResponderEliminarNagato, 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.
ResponderEliminarQuiero 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
ResponderEliminarEsta 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.
Muchas gracias Patry. Daremos buena cuenta de ella :)
EliminarEstoy 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.
ResponderEliminarHola. 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.
EliminarGracias por la respuesta, sí me refería precisamente a eso a las dinámicas.
Eliminar