21 de jul de 2011

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


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='http://4.bp.blogspot.com/_WvACVGW1iPE/TESCN5imqaI/AAAAAAAABLw/nPZTbdTw8lI/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a>
<a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='http://2.bp.blogspot.com/_WvACVGW1iPE/TESCQ1YcjdI/AAAAAAAABL4/Gk42jcjsLtQ/s320/arrow_right.png' title='Aumentar Área do Post'/></a>
</div>


Salve.



Um comentário:

  1. Bom Dia !!!1
    tentei fazer diretinho como foi ensinado mais não a postagem não se expandiu ja altereis os numeros pela sugestão que vc deu mais ainda continua do memso jeito, eu to usando os modelo do novo blog baseado em "Viagem" tem algum coisa haver?? as setas ficou no lugar , só não ta expandido a postagem fico no aguardo se poder me manda a dica ai pro meeu email >> o.ojairo@gmail.com fico no aguardo valeuu

    ResponderExcluir

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