19/08/2008
12:14
Tutorial
Después de leer esta entrada de Help Developer en la cual muestra como ocultar la sidebar usando la librería JQuery, pensé que podría conseguirse lo mismo usando el script de Dynamic Drive para cambiar el color del blog como explica Gema en esta entrada.
Para realizarlo debemos bajarnos el fichero styleswitch.js de su página y subirlo a nuestra página de alojamiento.
Editamos nuestra página html sin expandir artilugios y copiamos desde body { hasta ]]></b:skin>, abrimos el programa Bloc de Notas, pegamos lo copiado y buscamos
#main-wrapper {
width: 550px; ◄ es la ancho que tienen nuestras entradas
...
}
#sidebar-wrapper {
width: 220px; ◄ es la ancho que tiene nuestra sidebar
...
}
ahí deberemos sumar al #main-wrapper el ancho de nuestra #sidebar-wrapper de tal forma que quedaría
#main-wrapper {
width: 770px; ◄ suma de #main-wrapper + #sidebar
...
}
El otro cambio a realizar será en #sidebar-wrapper, sustituimos todo por
#sidebar-wrapper {
display: none;
}
Guardamos esta nueva hoja como estiloA.css
Subimos este fichero a nuestra web de alojamiento y editamos nuestra plantilla HTML. Antes de </head> pegamos
Guardamos, vamos a añadir un elemento HTML (Importante no deberá incluirse en la sidebar, podéis colocarlo arriba de las entradas o debajo del Header) y pegamos
Podéis añadir una imagen en vez de texto sustituyendo Ocultar Sidebar y Mostrar Sidebar por
Te recomendamos también
+ Artículos relacionados de Tutorial
Para realizarlo debemos bajarnos el fichero styleswitch.js de su página y subirlo a nuestra página de alojamiento.
Editamos nuestra página html sin expandir artilugios y copiamos desde body { hasta ]]></b:skin>, abrimos el programa Bloc de Notas, pegamos lo copiado y buscamos
#main-wrapper {
width: 550px; ◄ es la ancho que tienen nuestras entradas
...
}
#sidebar-wrapper {
width: 220px; ◄ es la ancho que tiene nuestra sidebar
...
}
ahí deberemos sumar al #main-wrapper el ancho de nuestra #sidebar-wrapper de tal forma que quedaría
#main-wrapper {
width: 770px; ◄ suma de #main-wrapper + #sidebar
...
}
El otro cambio a realizar será en #sidebar-wrapper, sustituimos todo por
#sidebar-wrapper {
display: none;
}
Guardamos esta nueva hoja como estiloA.css
Subimos este fichero a nuestra web de alojamiento y editamos nuestra plantilla HTML. Antes de </head> pegamos
<script src='URL ALOJAMIENTO/styleswitch.js.js' type='text/javascript'/>
<link href='URL ALOJAMIENTO/estiloA.css' rel='alternate stylesheet' title='Sidebar' type='text/css'/>
<link href='URL ALOJAMIENTO/estiloA.css' rel='alternate stylesheet' title='Sidebar' type='text/css'/>
Guardamos, vamos a añadir un elemento HTML (Importante no deberá incluirse en la sidebar, podéis colocarlo arriba de las entradas o debajo del Header) y pegamos
<a href="javascript:chooseStyle('Sidebar', 365)">Ocultar Sidebar</a>
<a href="javascript:chooseStyle('#', 365)">Mostrar Sidebar</a>
<a href="javascript:chooseStyle('#', 365)">Mostrar Sidebar</a>
Podéis añadir una imagen en vez de texto sustituyendo Ocultar Sidebar y Mostrar Sidebar por
<img src="URL ALOJAMIENTO IMAGEN"/>
Increíble.
ResponderSuprimirO.O
Nunca se me habría ocurrido, y la idea es genial. O.O Agrandar el espacio de lectura (es una de mis obsesiones).
Lo probaré.
Bien planteado :)
ResponderSuprimirMe dices que no funciona los enlázame ¿te refieres a mi sidebar?
¿dónde están los datos nuevos?
No te entiendoooooooo
Gem@ no funcionan los tuyos, los mios ni ninguno, Blogger tiene un fallo que desde ayer no permite agregar ningun gadget a los blog...
ResponderSuprimir¿Pero que me estás contando? si esta tarde he estado arreglando dos plantillas y añadí dos menús :( que cosa más rara.
ResponderSuprimirMi enlázame va bien y el desplegable del footer también o es mi empeño en verlo bien ...
gem@,intenta usar tu enlazame y lo entenderas, no funcionan y ya van dos dias pero es error de blogger...
ResponderSuprimirSí, lo leí yo acá:
ResponderSuprimirhttp://www.bloggerbuster.com/2008/08/problems-adding-widgets-to-blogger.html
:)
Hay una extensión de Firefox que encontré en Vagabundia que viene la mar de bien en estos casos se trata de IE Tab una vez que lo instalamos se añade un icono en el escritorio que permite con un clic pasar de Firefox a Explorer.
ResponderSuprimirGem@ este comment va aqui???....jajajajaja...ahora en serio ya la tenia instalada es muy util, el otro dia me baje IE tester, permite testear tu blog desde IE5.5 hasta el 8.
ResponderSuprimirHm, A mi no me funciona, en mi caso el sidebar se va para abajo,.-
ResponderSuprimirBNV, en tu caso debes poner todo lo que tienes en "colunas" como display: none; no solo la sidebar....
ResponderSuprimirOk,lo intentare en mi blog de pruebas, gracias por contestar.
ResponderSuprimirSaludos,.
señor pizcos me ggustaria colocar ocultar y mostrar side bar, queria saber si podria copiar la imagen que tiene usted, los logos de ocultar o mostrar....
ResponderSuprimirBear...! con Pizcos, vale...☺☺☺...claro que puedes coger lo que quieras...
ResponderSuprimirgreat!!
ResponderSuprimirGracias por este fantástico y simple truco ^^
ResponderSuprimirMr.Prado gracias a ti por la visita ☺☺☺ (y tu entrada)
ResponderSuprimirEy! Hola de nuevo Pizcos ^^:
ResponderSuprimirUna preguntilla, ¿se podría hacer algo para que se conservara la última vista del blog (con o sin la sidebar) en cookies o algo así para que "recordara" en posteriores visitas?
Porque al menos en mi blog no se guarad :(
Mil gracias.
Mr Prado no me gusta jugar con las cookies de los demas, pero mira si tienes habilitada las cookies en tu navegador, eso debe ser suficiente...
ResponderSuprimirSí que las tengo activadas pero ... nada :S
ResponderSuprimirBueno yo tampoco quiero meterme en la casa de nadie pero es para evitar "el rollo" de tener que adecuar la vista que queramos por defecto (con/sin sidebar) cada vez que accedemos a la página.
Muchas gracias de todos modos; un saludo.
Mr Prado me referias a que miraras que no tuviese marcado lo de borrar cookies cada vez que cierras el navegador ☺☺☺
ResponderSuprimirNo qué va, no se borran. De hecho incluso sin cerrar el navegador, recargando la página o cerrándola y abriéndola al rato ya vuelve a la configuración original :S
ResponderSuprimirMr Prado siento no poder ayudarte ☺☺☺
ResponderSuprimirHola Pizcos, me encanto este truco, ya lo aplique a mi blog, pero tengo una duda, en tu Mostrar/Ocultar no aparecen dos textos separados, solo un boton que cambia la accion al ejecutarlo.
ResponderSuprimirCómo podría yo hacerlo igual? Necesito algún condicional o algo extra?
Gracias!
AleMMR95 yo no uso este truco, uso jquery para hacerlo. No he explicado como hacerlo porque depende de cada plantilla incorporarlo, no hay posibilidad de hacerlo general...
ResponderSuprimir@Pizcos Muchas gracias por responder!
ResponderSuprimir