Post que se expande para os lados em um clique, no novo Blogger

 DEMO

Essa dica eu já tinha visto a um tempão no blog do Pizcos, mas era para ser usada no antigo Blogger. Trago agora a dica para usar no novo Blogger, depois das adaptações feitas por mim.


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. 

Agora procure por:  

]]></b:skin>  

 

Substitua-o (TROQUE) então pelo seguinte código: (Observe que neste código há dois números destacados na cor vermelha. Isso é porque você vai precisar configurar para que fique de acordo com o seu template. Vá trocando os números e visualizando o seu blog até ficar certinho).
800---Tamanho ao expandir
500---Tamanho ao contrair


.expandp{
float: right;
margin: -40px 2px 50px 0;
}

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function agrandarentrada(){
div = document.getElementById("sidebar-right-1");
div.style.display="none";
div = document.getElementById("sidebar-right-2-1");
div.style.display="none";
div = document.getElementById("sidebar-right-2-2");
div.style.display="none";
div = document.getElementById("sidebar-right-3");
div.style.display="none";
div = document.getElementById("main");
div.style.width="800px";
div.style.fontSize="14px";
}
function achicarentrada(){
div = document.getElementById("sidebar-right-1");
div.style.display="";
div = document.getElementById("sidebar-right-2-1");
div.style.display="";
div = document.getElementById("sidebar-right-2-2");
div.style.display="";
div = document.getElementById("sidebar-right-3");
div.style.display="";
div = document.getElementById("main");
div.style.width="500px";
div.style.fontSize="12px";
}
//]]>
</script>


Salve.

Agora clique em Expandir modelos de widget.

Procure por:

<div class='post-header'>

Cole então acima dele o código abaixo:

<div class='expandp'>
<a href='javascript:achicarentrada();'><img alt='Voltar à Área Padrão do Post' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ierU1etrj7AjTGgfR8TPYopY3AWh_ZMnuE9koJEgzVwrI46yoL1GdkxwBXTcBRUsQkoV7lN5zxKFcExS7AieeEBP6DaGJ83CbsBAnYVsbG1O6bk3HD4I_HZPGQdoekxy3JFgSJQGXf34/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a>
<a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8qzLiZ1A-teQi8dDpiNyOLRuOtBc8ZE9awo3hQntWk3mPdzNJKro_SeT3fRT-mMbMUNe3Vmb9e3YTXNc9Rz2t_bQB7UsVw1Xm8UTDneC8egcUgmACFY4dUjuCvIsbynaQOxmzJQ9ja75/s320/arrow_right.png' title='Aumentar Área do Post'/></a>
</div>

Salve.