Hola, Sidebar; adiós, Sidebar...

Eso mismo: con un "click" podemos hacer "aparecer" y "desaparecer" la sidebar en nuestro blog... con un efecto "slide". Para muestra, el ejemplo que tengo en la sidebar de mi BLOG DE PRUEBAS-
Como digo, yo elegí un efecto "slide", pero tenéis también un efecto elástico y un "fade" para elegir (y llamar, dentro del script pbbsidebar). También se pueden cambiar el fondo y el color.


Lo hice así:

.- SCRIPTS:

<script src='http://.../mootools.v1.00.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/pbbsidebar.v1.00.js' type='text/javascript'/>



<script>

window.onload = function() {



MySideBarA = new PBBSideBar();



MySideBarB = new PBBSideBar({

position : &#39;left&#39;,

styles: {

&#39;width&#39;: &#39;350&#39;,

&#39;color&#39;: &#39;white&#39;,

&#39;background-color&#39;: &#39;red&#39;,

&#39;opacity&#39;: 0.6

},

showDuration: 500,

showEffect: Fx.Transitions.backOut,

hideDuration: 500,

hideEffect: Fx.Transitions.quadInOut

});



MySideBarC = new PBBSideBar({

position : &#39;left&#39;,

transition : &#39;appear&#39;,

styles: {

&#39;width&#39;: &#39;300&#39;,

&#39;color&#39;: &#39;white&#39;,

&#39;background-color&#39;: &#39;blue&#39;,

&#39;opacity&#39;: 0.9

},

showDuration: 1000,

hideDuration: 1000

});



// Ajoute l&#39;Ã&#169;vÃ&#169;nement de dÃ&#169;tection du clavier pour afficher/cacher la SideBar

window.addEvent(&#39;keyup&#39;, function(event) {

var event = new Event(event);

if (event.key == &#39;a&#39;) MySideBarA.display();

if (event.key == &#39;b&#39;) MySideBarB.display();

if (event.key == &#39;c&#39;) MySideBarC.display();

});

}

</script>

¡¡OJO!!: Es necesario abrir el script pbbsidebar y cambiar el ancho de la sidebar a esconder y mostrar, porque no creo que haya ahora mismo dos plantillas iguales en toda la red de Blogger. Cada quien debe acomodar el punto oportuno en este script al ancho de su sidebar.

.- HTML:
Inmediatamente antes de la apertura de la sección sidebar en la plantilla extendida, colocar la llamada a los scriots y el contenedor del "click":

<h1>Sidebar</h1>

<pre>

</pre>

<p>

<input onclick='javascript:MySideBarA.display();' type='submit' value='Click'/>

-



</p>

<hr class='hide'/>

Picando en "click" una vez, se esconde la sidebar... picando de nuevo, se cierra. Y cuidado con donde ponéis el html, no sea, p.e., que vuestra plantilla sea de las que tienen la sidebar bajo las entradas... entonces se esconderán éstas también...

Original: pokemon