01:42
12 de fevereiro de 2012
Postado por: Hudson
Bom, nesta técnica usaremos um simples script em JS e uma div.

Clique nos botões abaixo e veja como funciona



Legal né? Então vamos colar nosso script acima da tag:
</head>
O script a ser colado é este:
<script type='text/javascript'>
//<![CDATA[
function fontMais(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontMenos(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>


Pronto, agora a Div para definir a área em que vai ser aplicado a mudança do tamanho da fonte fica assim:

<div id='textoFonte'>TEXTO_AQUI</div>

Agora se você quer fazer como eu fiz, para a alteração se aplicar a todo o conteúdo da postagem, basta vc ir em Design, Editar HTML, Expandir Modelos de Widgets.

Procure pelo primeiro resultado de:
<data:post.body/>

Cole o seguinte código acima:
<div id='textoFonte'>

e acima do primeiro resultado de:
<div class='post-footer'>

Cole o fechamento da div:
</div>

Esta função não funciona direito porque ele sempre vai aumentar a fonte apenas do primeiro post exibido na página, por isso ela é recomendável apenas para você que usa a função Leia Mais

Pronto, agr as alterações feitas a partir do botão serão aplicadas a todo o conteúdo do post.

O código do botão Aumentar é:
<a alt='Aumentar fonte' href='javascript:fontMais()'><img src='http://www.imgfans.com.br/NR/Fev12/12/mais.png'/></a>,
E o Diminuir é:
<a alt='Diminuir fonte' href='javascript:fontMenos()'><img src='http://www.imgfans.com.br/NR/Fev12/12/menos.png'/></a>

Bom galera, espero ter ajudado, se gostaram comentem e visitem sempre o site.
0 comentários: