Esconder/Mostras colunas no novo Blogger com um clique e efeito JQuery

 DEMO

Eu já havia ensinado esse hack para o antigo modelo do Blogger, o Mínima, agora, trago a dica para ser implementada no novo Blogger, no template Simple.  Este código permite esconde as colunas inteiras da sidebar, escondendo todos os elementos. Com isso, é possível um carregamento mais rápido da página além de deixar o template mais leve, te possibilita brincar com o layout dando um efeito interessante.


Vá até o Modelo de seu blog, clique em Editar modelo

  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

]]></b:skin>  

E troque por este código abaixo

 #sidebararea-wrapper, #sidebararea1-wrapper, #sidebararea2-wrapper{width: 100%; background: #ccc;padding: 12px 5px 12px 5px; margin: 12px 4px 6px 4px;border: 1px groove #ccc;-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
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 */}
#sidebararea-wrapper a, #sidebararea1-wrapper a, #sidebararea2-wrapper a {color: #000; text-shadow: -1px -1px white, 1px 1px #333; font-size: 19px;}
]]></b:skin>
<script src='http://sites.google.com/site/templateseacessorioselke/expande/1expande.js' type='text/javascript'/>

Salve.


Agora clique em "Expandir modelos de widget"


SE SUA COLUNA FICA A DIREITA PROCURE POR :

<div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='2'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

E troque por:

<div class='column-right-inner'>
<div id='sidebararea-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea.slideit()'>Sidebar [+ / - ]</a>
    </div>
    <div id='sidebararea'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='2'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
<script type='text/javascript'>var sidebararea=new animatedcollapse(&quot;sidebararea&quot;, 500, false)</script>
</div>
</div>
        </div>
         </div>

SE A SUA COLUNA FICA A ESQUERDA PROCURE POR:

<div class='column-left-outer'>
        <div class='column-left-inner'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='1'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

E troque por:

<div class='column-left-outer'>
        <div class='column-left-inner'>
<div id='sidebararea1-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea1.slideit()'>Sidebar [+ / - ]</a>
    </div>
    <div id='sidebararea1'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='1'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
<script type='text/javascript'>var sidebararea1=new animatedcollapse(&quot;sidebararea1&quot;, 500, false)</script>
</div>
</div>
        </div>