Sidebar que se expande (fica escondida)

Para que em seu blog a sidebar seja expansível como neste modelo,  leia com atenção as instruções abaixo. Respire, tenha paciência e perseverança que você irá conseguir.

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 depois do código:
]]></b:skin>

 Cole o código abaixo.

<script language='javascript'>
function showdiv(ativar,id1,id2)
{ var A=document.getElementById(id1);
var B=document.getElementById(id2);
if(ativar==&#39;sim&#39;)
{
B.style.display = &#39;block&#39;;
A.style.display= &#39;none&#39;;
}
else
{
A.style.display = &#39;block&#39;;
B.style.display= &#39;none&#39;;
}
}</script>

Agora procure pelo seguinte código: (sem expandir modelos de widget)

<div id='sidebar-wrapper'>


Cole antes dele o código abaixo:

<div id='ocultarcat'>
<div class='mais'>
<a href='#' onClick='showdiv(&quot;sim&quot;,&quot;ocultarcat&quot;,&quot;mostrarcat&quot;); return false'><center><strong> Mostrar sidebar &#9660;</strong></center></a>
</div>
</div>
<div id='mostrarcat' style='display:none'>
<div align='left'>
<div class='menos'>
<a href='#' onClick='showdiv(&quot;nao&quot;,&quot;ocultarcat&quot;,&quot;mostrarcat&quot;); return false'><center><strong>Ocultar sidebar &#9650;</strong></center>
</a>
</div>

Agora  com bastante atenção, procure por um código como este abaixo, que  deverá estar um pouco abaixo de onde você acabou de colar o último código.


</b:section>
</div>

E cole este código abaixo:

</div>
</div>

Portanto o código deverá ficar assim:

<div id='ocultarcat'>
<div class='mais'>
<a href='#' onClick='showdiv(&quot;sim&quot;,&quot;ocultarcat&quot;,&quot;mostrarcat&quot;); return false'><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjT9IRqMegqaiLgDRiNRA6V6n_ZWg4EqmKqFyt__JN4sSto2a27p4Rwl5LCF5CFILBtB0H8hVav8B-yMooSHsmuZmCPBSkV96j1pqZozY3DxVDTTjRtnLWW3BlCD877dZKiH7JsCkMdk/s1600/setabaixo.png'/><strong> Mostrar sidebar &#9660;</strong></center></a>
</div>
</div>
<div id='mostrarcat' style='display:none'>
<div align='left'>
<div class='menos'>
<a href='#' onClick='showdiv(&quot;nao&quot;,&quot;ocultarcat&quot;,&quot;mostrarcat&quot;); return false'><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK3ls52g9lJ7qDfoDimYloV1AxbusuCS3gdQWEDOGsjAjDJ_dZTlhweuuxhKnjLY3igyPDBA2f7t1tbRs0Kpn5PSglw9XIQWETm5paem5153NKNeuVbXP0vTf977V4A-llpHTOPlJ7SMo/s1600/seta+cima.png'/><strong>Ocultar sidebar &#9650;</strong></center>
</a>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList2' locked='false' title='Outros templates' type='LinkList'/>
<b:widget id='CustomSearch1' locked='false' title='Pesquisar este blog' type='CustomSearch'/>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Créditos' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Outros templates' type='LinkList'/>
</b:section>
</div>
</div>
</div>

A parte na cor preta deverá existir em seu blog e deverá estar assim.
O código na cor verde deverá estar de acordo com os widgets de seu blog
O código na cor vermelha é a parte que você acrescentou com essa tutorial..

Com este código você poderá ocultar qualquer parte do blog.

 Para ocultar as postagens, procure o trecho que está em negrito na cor azul e aplique o código como na explicação acima onde está em vermelho.

AQUI O PRIMEIRO CÓDIGO

<div class='mainwrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

AQUI O SEGUNDO CÓDIGO

Créditos: Hack Blogger