Script para aumentar e diminuir o tamanho da fonte dos artigos

Compartilhar:
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+F para 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.
► Postagens Relacionadas:

37 Comentários

João Michael disse...

Joãozinho... consegui fazer até o passo 6; mas, depois, ao pesquisar pelo ctrl F não achava resutados.
o que pode ser?

3 de dezembro de 2011 às 13:12
João Neto disse...

Muitas vezes você deverá marcar a caixa "Expandir modelos de widgets". Pois muitos templates oficiais do Blogger requer isso. Ou até mesmo o seu template não tem a tag descrita, mas acho isso muito improvável. Tente novamente e me envie a sua resposta.

3 de dezembro de 2011 às 19:21
Nicolas Danielski disse...

Aqui no meu eu n acho a a primeira a 2ª pesquisa com o crtl+f me ajuda?

5 de fevereiro de 2012 às 12:31
Nicolas Danielski disse...

a e no 9º passo tem duas esolha como fasso ali tambén?

5 de fevereiro de 2012 às 12:50
Nicolas Danielski disse...

agora deu serto rsrs

5 de fevereiro de 2012 às 12:56
Nicolas Danielski disse...

o meu por esemplo n esiste a onde eu boto?

5 de fevereiro de 2012 às 13:13
João Almeida disse...

Você, algumas vezes, deverá desmarcar a opção Expandir modelos de widgets para procurar esta tag. Verifique e tente novamente!

Obrigado pela participação.

5 de fevereiro de 2012 às 16:16
João Almeida disse...

Que bom que conseguiu Nicolas. Obrigado pela sua visita e volte sempre!

5 de fevereiro de 2012 às 16:19
João Almeida disse...

Pode me enviar o URL do seu blog para mim verificar o caso?

5 de fevereiro de 2012 às 16:41
Nicolas Danielski disse...

aqui esta: http://ligadosnotransformice.blogspot.com/

5 de fevereiro de 2012 às 16:42
João Almeida disse...

Não haverá outro modo a não ser o seguinte. Se você quiser que eu lhe ajude, fique a vontade para você me colocar como administrador de seu blog enviando-me um convite. Para isso, você deverá ir em Configurações, Básico, Permissões, Autores do blog e adicionar autores. Logo depois, me envie o e-mail para "contato.categoriablogger@gmail.com" e me deixe ser administrador.

Neste modo, instalarei para você o código gratuitamente.

5 de fevereiro de 2012 às 16:53
Nicolas Danielski disse...

ja mandei o convite

5 de fevereiro de 2012 às 16:57
João Almeida disse...

Agora, coloque-me como administrador de seu blog.

5 de fevereiro de 2012 às 17:00
João Almeida disse...

Pronto! Visualize seu blog e veja as postagens!

5 de fevereiro de 2012 às 17:10
Nicolas Danielski disse...

vlw!

5 de fevereiro de 2012 às 17:12
Nicolas Danielski disse...

como eu fasso para mudar a caixa de comntraios do blogger pela a do facebook só me mande o link

5 de fevereiro de 2012 às 17:27
João Almeida disse...

Isto ainda não sei como substituir, mas você pode colocar o código abaixo do post-footer.

5 de fevereiro de 2012 às 17:31
João Almeida disse...

Veja a postagem: http://joao987.blogspot.com/2012/02/substituindo-caixa-de-comentarios-do.html

6 de fevereiro de 2012 às 19:38
Nicolas Danielski disse...

joão acho que tu vai ter que botar o botão de almentar e diminuir de novo TT.TT pois o cara que ta me ajudado no blog mudoa lragura do blog e eu acbei tirado todas as atualizações TT.TT

9 de fevereiro de 2012 às 18:33
João Almeida disse...

Tudo bem, made-me de novo o convite!

9 de fevereiro de 2012 às 18:40
LeandroAM disse...

Noosssaaaaaa Que Coisa, 20 Comentários de NADA, não é melhor falar por contato?

10 de fevereiro de 2012 às 10:24
Nicolas Danielski disse...

kade teu e-mail?

10 de fevereiro de 2012 às 11:04
NicolasDanielski disse...

a e dessa ves n sai do blog caso iusso acontessa de novo
por favor

10 de fevereiro de 2012 às 11:07
NicolasDanielski disse...

as

10 de fevereiro de 2012 às 11:09
NicolasDanielski disse...

achei

10 de fevereiro de 2012 às 11:15
LeandroAM disse...

kade?

10 de fevereiro de 2012 às 11:30
LeandroAM disse...

ves?, iusso?

10 de fevereiro de 2012 às 11:30
LeandroAM disse...

opis?

10 de fevereiro de 2012 às 11:30
LeandroAM disse...

Nãoo, Ta de brincadeira.

10 de fevereiro de 2012 às 11:33
João Almeida disse...

Olá Leandro.
Se você já foi criança, poderá perceber que você escrevia e/ou digitava incorretamente. Não zombe de quem não sabe escrever. Além de falar através de comentários, foi opção do leitor e você não é dono deste logo para poder decidir o que os leitores devem ou não fazer. Se você é uma pessoas tão correta, você deve ter lido os termos de uso, que fica bem claro que não pode xingar dos leitores ou de qualquer indivíduo. Obrigado pela sua visita.

10 de fevereiro de 2012 às 16:57
LeandroAM disse...

Primeiramente, Eu não iria me atrever a xingar uma "criança", quando você for fazer uma faculdade ou outra coisa do tipo, você aprendera várias coisas. Que você mesmo não te conhecendo, sei que não sabe.
"você deve ter lido os termos de uso, que fica bem claro que não pode xingar os leitores ou qualquer indivíduo."

Cara, Você esta me acusando que eu xinguei alguém, só dei uma sugestão. Eu não sou dono deste logo, como assim? Da logo do seu "Blog"?

11 de fevereiro de 2012 às 10:46
Edson Ferreira da Silva disse...

Já tentei este codigo, segui tudo corretamente. Funciona uma, duas e até três vezes, mas não sei o que ocorre, após algum tempo simplesmente pára de funcionar.

30 de abril de 2012 às 00:48
João Almeida disse...

Provavelmente não sei o que ocorreu. Em todos os templates testados ocorreu tudo bem.

30 de abril de 2012 às 14:22
João Almeida disse...

Não entendi seu comentário. Poderia ser mais expressivo?

3 de junho de 2012 às 17:07
Junior disse...

Eu estava procurando por isso há muito tempo, pena que não funciona no meu.
A "medida" da fonte no meu template está em "%" e não em "px".
Existe algum modo de eu aplicar esse script mesmo assim?
Tentei, mas não deu certo!

22 de agosto de 2012 às 01:01
João Almeida disse...

Junior, você já tentou mudar o px por %? Se Já tiver tentando e não tiver dado certo, basta você converter o % no seu template por px e instalar o script. Caso esteja com dúvidas, leia este artigo que encontrei pela web:
http://eryxguimaraes.blogspot.com.br/2010/03/tabela-de-conversao-de-tamanhos-de.html

22 de agosto de 2012 às 12:34
Maique Borges disse...

Meu blog é esse: http://www.defencionemevangelium.com.br/ Estou procurando esse recurso há vários dias, os passos são semelhantes em todos tutoriais que eu vi, consegui fazer todos os passos como descrito, mas nunca aparece nada. O que pode estar acontecendo? Agradeço sua ajuda!

10 de junho de 2014 às 17:19

Postar um comentário