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:
Obrigada amigo,seu tutorial foi bem didático.
bjos
Postar um comentário