Gostou do blog ? então curta nossa página no Facebook:

Script Aumentar Diminuir Letra do Texto no Post

Este script permite que o leitor aumente ou diminua a letra conforme ele queira e muito bom e util para leitos que tem problema de visão ou a tela seu monitor seja um pouco pequena.
Boa este script foi desenvolvido por Clau, dona do Gothic Darkness e com uma colaboração de Matheus Serafim, portanto todos os créditos desse script são para eles.



1° Passo - Instalando o script
Para instalar o script basta ir em "design" (antigo "layout"), clique em "editar HTML", e não precisa clicar "expandir modelos de widgets" e procure pela tag </head>
Copie o código abaixo e cole ANTES dela sem alterar nada: 

<!-- 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/ -->

E salve as alterações !


2° Passo - Colocando ícones clicaveis para aplicar o efeito
Volte na aba "design", clique em "editar HTML", marque a opção em "expandir modelos de widgets" e procure pela tag:

<div class='post-header-line-1'>

Logo ABAIXO dela, cole o seguinte código:

<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 !


Caso você queira substituir a imagem e só trocar o endereço da imagem no código acima, pelo o link da sua imagem.

ATENÇÃO: Se o código estiver assim: <div class='post-header-line-1'/>, com a barra no final, substitua-o por:

<div class='post-header-line-1'><---código dos ícones aqui--->
</div>

3° Passo aplicando o efeito em todas postagens
Foi nesta parte agora que Matheus Serafim ajudou fazendo aplicar o script a todos os postos de uma vez
Volte em "design", clique em "editar HTML", marque a opção em "expandir modelos de widgets" e procure pelo seguinte código:

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

Substitua TODO o código acima por este:

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

Agora visualize e salve !


Pronto e só isso espero que gostem !

1 comentários:

Cecília disse...

Obrigada amigo,seu tutorial foi bem didático.
bjos

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑