30 de ago de 2011

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


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>

Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube