6

Script Aumentar / Diminuir letra do texto da postagem

Este script permite que seu leitor aumente ou diminua a letra do texto de seu post.


 
Vamos instalar este script: Vá em seu blog, "Design" > "Editar HTML" NÃO marque a caixinha "Expandir modelos widgets" e cole o seguinte código abaixo bem ACIMA de </head> (Procure com Crtl + F para ficar mais fácil a busca no HTML).

<!-- Script Aumentar/Diminuir Fonte by http://www.mundodarkness.com/ -->
<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>
<!-- Fim Script Aumentar/Diminuir Fonte by http://www.mundodarkness.com/ -->

Salve seu modelo! Agora já pode marcar a caixinha "Expandir modelos widgets" e procure o tag: <div class='post-header-line-1'/> ou algo bem parecido com isto e cole o seguinte código logo ABAIXO dela.


<b:if cond='data:blog.pageType == "item"'>
<a alt='Aumentar fonte' href='javascript:fontMais()'><img src='http://img405.imageshack.us/img405/2006/fontmais.gif'/></a>
<a alt='Diminuir fonte' href='javascript:fontMenos()'><img src='http://img707.imageshack.us/img707/359/fontmenos.gif'/></a></b:if>


Salve! Procure pelo seguinte trexo:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/><!-- clear for photos floats -->
</div>

E cole o tag <div id="textoFonte"> bem ABAIXO de <div class='post-body entry-content'> e acrecente mais um </div> ao final do trecho. Ficando assim:

 
<div class='post-body entry-content'>
<div id="textoFonte">
<data:post.body/>
<div style='clear: both;'/><!-- clear for photos floats -->
</div></div>

Visualize o modelo e se estiver tudo ok, salve!
Fonte: Gothic Darkness

6 comentários:

  1. Usei os códigos no blog de teste, corretamente, não funcionou. Não entendi.

    ResponderExcluir
  2. @Sonia Boni Não há erros Sonia, facil de colocar em seu blog. Comente sempre!

    ResponderExcluir
  3. Eu fiz tudo certinho.Uso o modelo antigo (o clássico).Deu tudo certo aqui,os botões apareceram,tudo ok.Só que a minha sidebar inteira foi pra baixo! Não entendi porquê aconteceu isso.Como resolvo?

    ResponderExcluir
  4. @Anna Devem ser o tamanho das letras do script que mandam a sidebar para o fim. Tente mudar o tamanho da letra no script. Se não funcionar, deve ser algum erro em seu template, pois testei no template original clássico minima e tudo deu certo. Tente ajustar algo e se não der certo, comente outra vez, pois nosso forte é ajudar!

    ResponderExcluir
  5. sonia, provavelmente nesta parte do codigo( ), o seu template nao está com a "aspas", e sim (id='textoFonte'>, veja se o problema é este!
    o meu aqui foi assim e tive que alterar!

    espero ter ajudado

    ResponderExcluir