Script que nos permite mostrar u ocultar cualquier div de nuestros sitios web de manera fácil, en el ejemplo vemos como ocultar la sidebar de los blogs de Blogger.

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'/>

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>

Podéis añadir una imagen en vez de texto sustituyendo Ocultar Sidebar y Mostrar Sidebar por
<img src="URL ALOJAMIENTO IMAGEN"/>


Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también