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:
Pronto, agora a Div para definir a área em que vai ser aplicado a mudança do tamanho da fonte fica assim:
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:
e acima do primeiro resultado de:
<div class='post-footer'>
Cole o fechamento da 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>
Clique nos botões abaixo e veja como funciona
Legal né? Então vamos colar nosso script acima da tag:
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>
Procure pelo primeiro resultado de:
Cole o seguinte código acima:
<div id='textoFonte'>
e acima do primeiro resultado de:
Cole o fechamento da div:
</div>
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>
Nenhum comentário:
Postar um comentário