Expandir/Contrair a sidebar com efeito delizante

Fiz alguns testes com o script para expandir elementos no blog que encontrei no blog Vagabundia, acrescentei nova <div  e eis o resultado: Expandir toda a sidebar do blog escondendo assim todos os widgets e de quebra, vc ainda poderá colocar uma cor de fundo. Clique AQUI e veja o resultado. Bom né ?

Pra começar salve o layout de seu blog.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML de seu blog e sem clicar em "Expandir modelos de widget" procure pelo seguinte trecho:



<div id='sidebar-wrapper'>

Agora acima dele cole o seguinte código:

<div id='sidebararea-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea.slideit()'>EXPANDIR SIDEBAR ▼ | CONTRAIR SIDEBAR ▲</a>
    </div>
    <div id='sidebararea'>
  

Agora encontre o seguinte código:

 <!-- spacer for skins that want sidebar and main to be the same height-->

E acima dele cole o próximo código:

<script type='text/javascript'>var sidebararea=new animatedcollapse(&quot;sidebararea&quot;, 500, false)</script>
</div>
</div>

Pronto, agora salve e procure o seguinte código:

/* Outer-Wrapper

Cole o próximo código antes dele fazendo as modificações necessárias:

/*sidebararea-------------------------------------------------------*/
#sidebararea-wrapper{width: 370px;background: #ccc;padding: 6px 2px 2px 2px; margin: 12px 4px 6px 18px;border: 1px groove $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}

Em amarelo----largura da área da sidebr, veja ele tem que ser maior que o seu sidebar.
Em azul---------cor de fundo da sidebar


Agora procure por: ]]></b:skin>

E abaixo dele cole o código abaixo.

<script src='http://sites.google.com/site/templateseacessorioselke/expande/1expande.js' type='text/javascript'/>

Se preferir, (é altamente recomendado) hospede o código javascript em um servidor e depois cole o endereço no código acima que está na cor verde.

expande.js