Script para aumentar e diminuir o tamanho da fonte dos artigos

Olá pessoal! Hoje irei ensinar como colocar quatro botões que eu utilizo aqui no blog: Os botões aumentar, diminuir, voltar ao tamanho padrão da fonte. Esta postagem é um pedido da leitora Bruna que perguntou como colocar esses botões. Esses botões são muito úteis para um blog, pois há leitores que preferem a fonte maior, menor. Vamos ao tutorial?

1. Acesse a guia Modelo, clique no botão Fazer backup/Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Depois, clique no botão Editar HTML e marque a caixa Expandir modelos de widgets.

3. Pressione Ctrl+F para abrir o Localizador do navegador, e procure o código a seguir.

</head>

4. Imediatamente acima deste código, cole o seguinte código.

<!-- Script Aumentar/Diminuir Fonte -->
<script type='text/javascript'>
/*********************************************************
Script por: http://www.mundoblogger.com.br/
-Vanessa
*********************************************************/
//<![CDATA[
function fontReset() {
var obj = document.getElementById("textFontButtons");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="11px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="12px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="13px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="14px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="15px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="16px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="17px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="18px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="19px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="20px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="21px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="22px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="23px"){obj.style.fontSize = "";}
if (obj.style.fontSize=="24px"){obj.style.fontSize = "";}
}
function fontUp(){
var obj = document.getElementById("textFontButtons");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "11px";}
else if (obj.style.fontSize=="11px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "13px";}
else if (obj.style.fontSize=="13px"){obj.style.fontSize = "14px";}
else if (obj.style.fontSize=="14px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "16px";}
else if (obj.style.fontSize=="16px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "18px";}
else if (obj.style.fontSize=="18px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "20px";}
else if (obj.style.fontSize=="20px"){obj.style.fontSize = "21px";}
else if (obj.style.fontSize=="21px"){obj.style.fontSize = "22px";}
else if (obj.style.fontSize=="22px"){obj.style.fontSize = "23px";}
else if (obj.style.fontSize=="23px"){obj.style.fontSize = "24px";}
}
function fontDown(){
var obj = document.getElementById("textFontButtons");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="24px"){obj.style.fontSize = "23px";}
else if (obj.style.fontSize=="23px"){obj.style.fontSize = "22px";}
else if (obj.style.fontSize=="22px"){obj.style.fontSize = "21px";}
else if (obj.style.fontSize=="21px"){obj.style.fontSize = "20px";}
else if (obj.style.fontSize=="20px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "18px";}
else if (obj.style.fontSize=="18px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "16px";}
else if (obj.style.fontSize=="16px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "14px";}
else if (obj.style.fontSize=="14px"){obj.style.fontSize = "13px";}
else if (obj.style.fontSize=="13px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "11px";}
else if (obj.style.fontSize=="11px"){obj.style.fontSize = "10px";}
}
//]]>
</script>
<!-- Fim Script Aumentar/Diminuir Fonte --> 

5. Clique no botão Visualizar e se estiver tudo correto, clique em Salvar modelo.

6. Agora vamos adicionar os botões. Ainda na opção Editar HTML, pressione novamente Ctrl+Fpara abrir o Localizar do navegador e procure pelo código abaixo.

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

Atenção: o código acima, faz referência à área que fica abaixo do título dos artigos, é o lugar onde iremos colocar os botões, caso você queira colocá-los em outro lugar, você deverá ter conhecimentos com HTML.

7. Após encontrado o código onde deseja colocar os botões ou ter encontrado o código acima, cole o seguinte código abaixo do mesmo.

<b:if cond='data:blog.pageType == "item"'><div class='text-font-button-area'>
<a href='javascript:fontUp()' title="Aumentar a fonte"><img src='URL-DA-IMAGEM-AUMENTAR' alt="+A" border="0"/></a>
<a href='javascript:fontReset()' title="Voltar ao tamanho padrão"><img src='URL-DA-IMAGEM-VOLTAR-TAMANHO' alt="+/-" border="0"/></a>
<a href='javascript:fontDown()' title="Diminuir a fonte"><img src='URL-DA-IMAGEM-DIMINUIR' alt="-A" border="0"/></a>
</div></b:if>

Substitua as partes destacadas de vermelho, pelo link da imagem do respectivo botão. Você pode criar suas próprias imagens no Adobe Photoshop utilizando o tamanho 23x23 para as três imagens.

8. Clique no botão Visualizar e se estiver tudo correto, clique em Salvar modelo.

9. Ainda na opção Editar HTML e com a caixa Expandir modelo de widgets marcada, pressione novamente Ctrl+F para abrir o Localizador de seu navegador e procure pelo código abaixo.

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

10. Substitua todo o código encontrado pelo código a seguir.

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

Informação: note que, só foi adicionado a parte que está destacada em vermelho. O passo pede para substituir o código, apenas para facilitar, mas você pode simplesmente adicionar o código que foi destacado ao invés de substituir o código.

11. Depois, clique no botão Visualizar e se estiver tudo correto, clique em Salvar modelo.

12. Este passo é opcional, pois aqui, nos iremos adicionar somente efeitos ao botões para deixa-los mais elegantes. Se você preferir adicionar estes efeitos, pressione Ctrl+F para abrir o Localizador e procure pelo código a seguir.

]]></b:skin>

13. Depois de encontrado o código, cole o código a seguir acima dele.

/* ----- Efeitos do recurso de Aumentar e Diminuir fonte ----- */

div.text-font-button-area {

    text-align:right;

}

div.text-font-button-area img {

    opacity:1;

    -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

    transition: all 1s ease;

}

div.text-font-button-area img:hover {

    opacity:0.20;

}

Você pode adicionar mais efeitos se preferir.

14. Para finalizar, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Pronto, entre em seus artigo para se certificar que eles estão funcionando. Lembre-se que os botões só aparecem na parte de dentro das postagens. Fiquem com Deus e até mais!

Referências:

• Mundo Blogger - Vanessa: Todo o código. Artigo original.
• Bloggando Na Web - Igor Souza: Adição do botão Voltar ao tamanho.