[Blogger - Hacks] - Script para aumentar/diminuir a fonte dos artigos no Blogger

A acessibilidade é uma boa questão a ser discutida. Quando a questão é obter mais visitas, você pára pra pensar na acessibilidade de seu blog para pessoas que tenham algum tipo de problema ou de deficiência? Pois neste artigo eu mostrarei a você como instalar um script muito útil, criado pela Vanessa, dona do blog Mundo Blogger. O script tem a função de aumentar e diminuir o tamanho do texto dos artigos de blogs criados na plataforma Blogger, facilitando a leitura dos visitantes que possuem problemas de visão e/ou preferem fontes grandes.

Acessibiidade: uma questão a ser pensada na blogosfera! — Foto por: Dystopos

O script e o tutorial original, você encontra no artigo que a Vanessa escreveu em seu blog.

Porém, eu fiz uma modificação no código original e vou postar o script modificado para vocês. A única diferença entre o código original (criado pela Vanessa) e o código modificado por mim, é que o modificado tem 1 botão a mais do que o original. O código original, mostra os botões de "Aumentar a fonte" e "Diminuir a fonte", e o código modificado mostra os botões de "Aumentar a fonte", "Diminuir a fonte" e "Tamanho padrão".

Esse botão de "tamanho padrão", tem como finalidade voltar a fonte ao tamanho padrão caso o leitor tenha aumentado a fonte e por algum motivo queira desfazer a ação. Você pode ver um exemplo de como os botões ficarão, em nosso blog de testes. Agora vamos ao tutorial!

Instalando o script para aumentar e diminuir a fonte


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu 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. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

3. Após encontrar o código, clique no botão abaixo para obter o código do script. Em seguida, cole o código do script imediatamente acima do código que você encontrou no passo anterior.

Script para aumentar/diminuir o tamanho da fonte

ATENÇÃO: o script é imprescindível para que o recurso funcione. Após clicar no botão para o obter o código, você será direcionado para uma página de publicidade. Aguarde cerca de 5 segundos e clique sobre o botão "Fechar Propaganda" no canto superior direito da tela para poder visualizar o código do script.

4. Clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Adicionando as imagens dos botões


5. Agora vamos adicionar os botões para que os leitores possam aumentar/diminuir a fonte. Ainda na opção Editar HTML pressione novamente Ctrl+F para abrir a caixa de Busca do editor e procure o código abaixo.

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

INFORMAÇÃO: o código acima faz referência à área que fica abaixo do título dos artigos, que é o lugar onde adicionaremos os botões. Caso você queira colocá-los em outro lugar, você deverá ter conhecimento em HTML e saber mexer no código do seu template.

6. Após ter escolhido o local de sua preferência ou ter encontrado o código que foi citado, cole este outro código imediatamente abaixo dele.

<b:if cond='data:blog.pageType == "item"'><div class='text-font-button-area'>
<a href='javascript:fontUp()' title="Aumentar a fonte"><img src='link-da-imagem-para-aumentar' alt="+A" border="0"/></a>
<a href='javascript:fontReset()' title="Voltar ao tamanho padrão"><img src='link-da-imagem-para-voltar-ao-padrão' alt="+/-" border="0"/></a>
<a href='javascript:fontDown()' title="Diminuir a fonte"><img src='link-da-imagem-para-diminuir' alt="-A" border="0"/></a>
</div></b:if>


Substitua o que está destacado em vermelho, pelo link da imagem de cada botão. Para a sua alegria, querido leitor, eu criei alguns botões e vou colocá-los para download logo abaixo, basta escolher o que mais lhe agradar, mas se quiser pode usar suas próprias imagens.

Clique com o botão direito do mouse na imagem e, escolha a opção "Salvar imagem como".
              
              
              
              
              
              
              
           

7. Clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Código para que os botões aumentem o texto apenas dos artigos


8. Ainda na opção Editar HTML pressione novamente Ctrl+F para abrir a caixa de Busca do editor e procure o código abaixo.

<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>


9. Substitua todo este código por este outro.

<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<div id='textFontButtons'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats --> </div>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<div id='textFontButtons'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats --> </div>
</div>
</b:if>


INFORMAÇÃO: repare 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 em vermelho ao invés de substituir tudo.

10. Clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Código CSS para criar efeito de transição suave


11. Agora adicionaremos um efeito de opacidade e transição para deixar os botões mais elegantes. Pressione novamente Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

12. Imediatamente acima deste código, adicione este outro.

/* ----- CSS 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.2;
}


13. Enfim, para finalizar, clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Agora é só entrar nos seus artigos e clicar nos botões para ter certeza de que estão funcionando corretamente. Lembrando que os botões aparecem somente na página interna dos artigos e não na página inicial do blog.

Site de origem: Mundo Blogger.

Atualização — 20.08.2011 às 04h20
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, para melhorar o efeito dos botões através da utilização de um efeito de opacidade com transição suave criado com CSS3 e para a adição de novos modelos de botão.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 68 comentários neste artigo!

  1. Uma dúvida, é que em meu blog só está aumentando a distancia entre as palavras (padding), e não a fonte. Meu blog é www.thecomputeiros.com.

    ResponderExcluir
  2. The Computeiro: eu visitei o seu blog e, realmente, parece que os botões estão mexendo no padding do texto apenas. A primeira coisa que se nota, é que os botões estão aparecendo no primeiro artigo da página inicial, o que não deveria estar acontecendo! Então, certifique-se de que você tenha inserido o código do passo 8 e do passo 11 deste tutorial no lugar correto! Se isto não corrigir o problema, pode ser alguma falha que haja no template que você está usando. Neste caso eu não poderei ajudar de uma forma mais efetiva. Espero que a dica lhe ajude! Volte sempre.

    ResponderExcluir
  3. Esse código foi o único que funcionou porque eu tentei vários. Ótima dica!

    ResponderExcluir
  4. @Igor Sousa, quanto ao local aonde eu coloquei o codigo creio que não faça diferencia, pois já testei no local aonde você disse para coloca, sem fala que o codigo não tem relação com isso, mas o que está acontecendo é:
    1- O codigo só transforma a primeira opção de fonte, por exemplo, eu no começo do post eu uso uma font x, e depois uma fonte y, o codigo só transforma o x que é o primeiro. Saberia o porque?
    Obrigado por ajuda.

    ResponderExcluir
  5. The Computeiros: o local do código do passo 11 importa sim, pois é ele quem indica ao script, qual conteúdo deve ser alterado. Inclusive, eu olhei o seu código fonte, e nos teus artigos eu notei alguns códigos “estranhos”, tais quais:
    class="Apple-style-span"
    Não sei se foi você quem inseriu esta classe para customizar o texto do seu artigo, mas não a encontrei sendo especificada em nenhum CSS do template, e os textos que contêm esta classe ou que aparecem depois dela, de alguma forma não são afetados pelo script. Você usa algum programa para escrever seus artigos? Tome cuidado ao copiar os artigos de outros blogs e depois colar direto em programas ou no editor do Blogger (no modo Escrever), pois as configurações do artigo que você está copiando podem ir junto, o que pode causar interferências.

    ResponderExcluir
  6. Rui: em qualquer navegador os atalhos que você citou funcionam pra aumentar o tamanho dos elementos de uma página, porém, a grande desvantagem destes atalhos, é que nem todo mundo os conhece e o tamanho da página em si também aumenta, fazendo com que o conteúdo do artigo, possivelmente, fique fora da visão do monitor, já os botões, aumentam somente o texto do artigo, com o detalhe de aumentar o texto dentro do limite do mesmo, sem aumentar os outros elementos do blog.

    ResponderExcluir
  7. @igor,
    Quanto ao passo 11, eu tinha feito como você havia dito, eu só coloquei o passo 7 e 8 em outro local, e foi por isso que eu falei que o local não importa, pois eu tava falando em relação ao passo 8 e não ao 11.
    Eu não copio conteúdo algum de outros sites, além do mais, eu sempre usa o modo editar html do editor padrão do blogger, sendo assim seria impossível vim as configurações de outros post mesmo se eu plagia-se.
    O código "Apple-style-span", sempre aparece quando uso uma das opções de cores do modo normal do editor do blogger, como exemplo:
    Quero o texto seja de cor vermelho, ae eu vou nas opções de cores e escolho a cor vermelha, pronto logo surgi o código "Apple-style-span".
    Obrigado pela ajuda, Grato!

    ResponderExcluir
  8. The Computeiros: sim, os botões (passo 8) podem ser inseridos em qualquer lugar que você quiser! E apenas para não haver confusão, ou mal entendimento por parte de outras pessoas, eu não me referia a plágio, mas às vezes copiamos trechos de outros blogs para fazer uma citação, e o blog ao qual citamos pode ter algum tipo de hack ou script que adiciona códigos no conteúdo copiado. Eu entendi a parte do “Apple-style-span”, mas se você cria seus posts no modo de edtiar HTML, tente deixar o conteúdo do artigo o mais simples possível, sem usar os botões de formatação do Blogger, pois estes botões inserem códigos “desnecessários”. Eu notei que você removeu a parte “Apple-style-span” e adicionou “style='color:red;'”... este é o modo correto de formatar os artigos, antes o texto que continha a classe “Apple...” não aumentava, mas depois de mudar a formatação para “style...” a fonte está sendo aumentada. Então, tente limpar o código do seus artigos o máximo possível e remover as formatações desnecessárias do Blogger, tais quais: “div class='separator'” e outras. Se isso não resolver, pode ser o que eu te falei antes, algum erro no seu template, neste caso você terá que analisar o seu template inteiro para encontrar o erro.

    ResponderExcluir
  9. Engraçado, tem um único artigo em que ele não aumenta a fonte, aumenta o espaçamento entre as frases. E nos outros funciona normal... Mistério... rs

    ResponderExcluir
  10. Sybylla: qual é o endereço do artigo onde está ocorrendo este problema?

    ResponderExcluir
  11. Oi, Igor.

    É neste aqui. http://migre.me/43DiT

    Dá pra ver que tem problema no espaçamento das linhas que ainda não concertei. Deve ser essa a causa do conflito, pois nos outros não tem esse problema. Mas tudo bem, funciona no resto.

    Abç!

    ResponderExcluir
  12. @Obrigado pela ajuda, e parabéns pelo blog!

    ResponderExcluir
  13. Sybylla: comparei o último artigo que você escreveu, com o artigo que você indicou no seu comentário. Olhando o código fonte dos dois eu encontrei (no que está com problemas), este código:
    class="MsoNormal"
    No último artigo que você escreveu (o que está funcionando), em nenhuma parte há o código que citei acima, então deve ser o mesmo problema do The Computeiros, abra o artigo que está com problema no editor do Blogger, e mude para o modo “Editar HTML”, e não o modo “Escrever”, e apague este código, mas apenas ele, e salve para ver se resolve o problema! Não se esqueça de salvar seu artigo no bloco de notas antes de modificá-lo!

    ResponderExcluir
  14. Er... (Igor pensa "A chata de novo...")

    Última dúvida, prometo. Dá pra inserir esse script nas páginas estáticas?

    :D

    ResponderExcluir
  15. Sybylla: rsrs, sinta-se a vontade para postar as dúvidas que tiver sobre os artigos, a área de comentários é exatamente para isto! Quanto à sua dúvida, é possível sim mostrar os botões nas páginas estáticas, você só precisa repetir o código (ele aparecerá duas vezes, um em cima do outro) do passo 8 e mudar a frase “item” para “static_page” no segundo código, ficará algo como:
    <b:if cond='data:blog.pageType == "item"'>
    CONTEÚDO
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
    CONTEÚDO
    </b:if>

    Qualquer dúvida, entre em contato novamente!

    ResponderExcluir
  16. Igor!

    Consegui sim colocar nas páginas estáticas.

    Dúvida 1 - Como colocar embaixo do título da página?
    Dúbida 2 - Por que diabos ele dá o mesmo problema daquele post (aumenta o espaçamento)?

    ResponderExcluir
  17. Sybylla: para colocar os botões abaixo do título dos artigos e/ou das páginas estáticas, basta você inserir o código do passo 8 (botões) abaixo do código do passo 7. E o problema de espaçamento se dá por interferência dos códigos do Blogger. Quando você utiliza os botões de formatação do editor de artigos do Blogger, ele adiciona muitos códigos desnecessários, tais quais: class="Apple-style-span" e class="MsoNormal", estes códigos impedem que o script acesse os elementos que os têm, por isso que aumenta somente o espaçamento e não o tamanho da fonte! Quando você criar um artigo e/ou uma página, e utilizar os botões de formatação do editor, lembre-se de entrar no modo Editar HTML e excluir os códigos desnecessários, ou escreva seus artigos direto no modo Editar HTML.

    ResponderExcluir
  18. Igor

    E esses códigos são todos automáticos? Que chatice... rs

    Sobre os botões, acho que me expressei mal, eu gostaria de centralizá-los, para ficar embaixo do texto. Sorry!

    ResponderExcluir
  19. Sybylla: infelizmente estes códigos são automáticos sim, por isso é mais vantajoso, e aconselhável, aprender o básico de HTML e CSS, para não ficar dependendo dos botões de formatação! Para centralizar os botões, adicione o código de alinhamento como mostrado no exemplo abaixo:
    <b:if cond='data:blog.pageType == "static_page"'>
    <div align="center">
    CONTEÚDO
    </div>
    </b:if>

    Após adicionar o código de alinhamento, é só salvar!

    ResponderExcluir
  20. Igor, valeu!

    Funcionou sim.

    Agora entendi o lance dos posts e o porquê de não darem certo.

    Obrigada mesmo! Abç!

    ResponderExcluir
  21. Olá Igor, adicionei este script no meu blog, porém na parte:

    div class='post-body entry-content'>
    div id='textoFonte'>
    data:post.body/>
    div style='clear: both;'/> /div>
    /div>

    houve alteração neste, após eu ter inserido este outro script (Hack "Leis Mais" Resumo de Postagem Automático com imagens na página Incial), Clau - Mundo Blogger.
    É possível permanecer os dois códigos em funcionamento?
    Obrigado.

    ResponderExcluir
  22. Parabéns, sua postagem é excelente, não tenho costume de comentar, mais sua postagem me ajudou muito, estou criando uma página para trabalho, e essas dicas são preciosas. Obrigado

    ResponderExcluir
  23. Marovisk: eu olhei o artigo da Clau, e creio que possa ser utilizado em conjunto sem problemas, mas não cheguei a testar. Para testar, tente colocar o código da seguinte maneira:
    <div id='textoFonte'>
    <b:if cond='data:blog.pageType == "item"'>
    <data:post.body/></b:if>
    <b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats --> </div>
    Espero que isto funcione! Volte sempre.

    ResponderExcluir
  24. Depois de alguns ajustes funcionou :D Manda esse link lá pra o mundo blogger atualizar o script deles...

    ResponderExcluir
  25. Bruno: fico feliz de saber que o código tenha funcionado com você, e a Clau já sabe da modificação do script dela, pois antes de publicar este artigo eu entrei em contato com ela para pedir permissão. Volte sempre!

    ResponderExcluir
  26. Igor, quando vc diz para colocar o link das imagens, devo colocar o link da internet ou do meu computador? Caso seja do meu computador, como faço para conseguir esse link?

    Obs.: Eu fiz todo o procedimento e usei links da internet: nada aconteceu (nenhum botão apareceu).

    ResponderExcluir
  27. 1º. G: quando digo para colocar o link das imagens, me refiro ao link da Internet, ou seja, você deve clicar com o botão direito na imagem que mais lhe agrada, salvá-la em seu computador, depois você deve carregá-la em algum site de hospedagem (eu aconselho o Picasa Web) e por fim copiar o link da imagem e colar no código. Eu visitei o seu blog e pude ver que as imagens já estão aparecendo (você utilizou as imagens azuis), os botões só não estão em funcionamento. Continue seguindos os passos (9 ao 12) do tutorial para adicionar o código necessário para fazer os botões funcionarem! Espero que isto lhe ajude. Qualquer dúvida, comente novamente!

    ResponderExcluir
  28. Igor, como vc sabe que eu escolhi as imagens azuis? Sinceramente, ao acessar meu blog, não consigo ver botão ou imagem alguma, mesmo seguindo estritamente seus passos.

    Obs.: Por favor, não me entenda mal. Eu tenho 15 anos, sou iniciante em relação a montagem de blogs e apenas quero essas informações porque, para o segundo trimestre, meu colégio solicitou a nós a montagem e frequente atualização de um blog, no qual falaremos sobre tecnologias socias. Por isso, o nome do meu blog é "exemplo de blog"; apenas fiz ele para testar diferentes mecanismos que posso utilizar no blog definitivo. Os botões para aumentar e
    diminuir os textos seriam um atrativo muito interessante. Assim, peço sua ajuda para conseguir instalar eles.

    Agradeço desde já e aguardo sua resposta!

    ResponderExcluir
  29. 1º. G: para mim os botões estão aparecendo. O código faz com que eles não apareçam na página inicial do blog, eles só aparecerão quando você clicar no título de algum artigo. Você pode tentar conferir neste link do seu artigo:
    http://exemplodeblogts.blogspot.com/2011/05/olimpiada-brasileira-de-fisica-1.html
    Os botões aparecem abaixo do título, e já estão funcionando.

    Se o problema persistir, entre em contato novamente e, se possível, coloque o link de algum Print Screen para eu ver como está aparecendo ai. Informe também qual navegador (e a versão) você está utilizando, apesar de eu ter testado com o: Firefox, Google Chrome, Opera e Internet Explorer e em todos ter funcionado.

    E não se preocupe, sinta-se a vontade para postar comentários quando ficar com dúvidas em algum dos artigos. Volte sempre!

    ResponderExcluir
  30. No entanto, nas páginas estáticas não tive sucesso.

    Meu blog é http://www.missoeseadoracao.net

    Meu blog de rascunho (sandbox) onde realizo os testes desse e de outros códigos e templates é http://gilson-moura.blogspot.com

    ResponderExcluir
  31. Missões e adoração: para utilizar os botões nas páginas estáticas, utilize o código que forneci para a leitora Sybylla nos comentários acima clicando aqui. Espero que isso lhe ajude. Agradeço o comentário e volte sempre!

    ResponderExcluir
  32. Iggor

    Como substituir os botões por imagem para css como esses desse tutorial que você postou a algum tempo.

    http://bloggandonaweb.blogspot.com/2011/07/como-transformar-links-em-botoes.html

    ResponderExcluir
  33. Welisson: basta você adicionar uma classe aos links, como no exemplo abaixo:
    <a class='font-button' href='javascript:fontMais()' ...></a>
    <a class='font-button' href='javascript:fontReset()' ...></a>
    <a class='font-button' href='javascript:fontMenos()' ...></a>

    Depois é só adicionar o CSS que é fornecido no tutorial de botão com CSS3. Espero que isso te ajude.

    ResponderExcluir
  34. Pelo visto o script funciona, mas vai depender do usuário entender os códigos do seu próprio template, caso este seja modificado.

    A parte do modificado corresponde a mim, mas não a parte do 'entender', pois o meu não funcionou (apareceu, inclusive após inúmeras tentativas, descobri vários lugares diferentes para se colocar os botões, seja no post ou fora dele).

    Bom, mas como não encontrei os tais códigos, que acabei usando como referência estes:

    No passo 8, ao invés do código referido no 7 (<div class='post-header-line-1'>) eu o colei abaixo deste: <h1><data:post.title/></h1 >

    E no passo 10 eu tanto substitui como também apenas inclui os códigos em vermelho (fiz os dois testes), pois o está originalmente assim:

    <div class='post-body'>
    <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
    </div>
    </div>
    <div style='clear: both;'/>
    </div>

    E somente incluindo os códigos em vermelho ficou assim:

    <div class='post-body'>
    <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
    <div id='textoFonte'>
    </div>
    </div>
    <div style='clear: both;'/></div>
    </div>

    Em todo caso aqui está o blog http://indiematics.blogspot.com/

    Abraço e obrigado pelo código, mesmo que não tenha conseguido usá-lo

    ResponderExcluir
  35. Damien Willis: realmente depende do template que o usuários está utilizando. Tentei entender o seu template pelo código fonte, mas, infelizmente, a estrutura dele é muito diferente dos templates tradicionais (duas colunas) e até mesmo da maioria dos templates modificados por terceiros. Para implantar esse código no seu template, só com uma analise completa da estrutura do template e das condicionais instaladas. Desculpe não poder ajudar de uma forma mais efetiva!

    ResponderExcluir
  36. Só o fato de você ter visto o código fonte já é um diferencial e tanto. A maioria dos blogs não se dão ao trabalho (e eu não os menosprezo isso, apenas engrandeço os que fazem).

    Irei trocar de template, não somente por não conseguir usar o script, mas sei apanhei muito em outros blogs que tinham um html customizado, ou mesmo desorganizado (embora neste caso o autor diga que se trata de HTML5... mas não sei).

    Abraço, Igor! (a proposito, está rolando um conflito nos teus comentários... as veze aparece este do google, mas em outras aquele terceiro (esqueci o nome, embora bastante semelhante o Disqus).

    ResponderExcluir
  37. Damien Willis: eu crio meus templates sempre com base nos templates dos Blogger, mas me inspiro nos templates do site BTemplates, lá existem diversos templates bacanas, mas creio que a maioria dos códigos são adaptados do Wordpress e podem estar desorganizados, como você definiu.

    Quanto ao conflito dos comentários, na verdade foi um teste do serviço Intense Debate. Eu estava tentando instalar esse serviço aqui no blog, mas, não sei porquê, o mesmo não funcionou - só no meu outro blog. Então eu estava alternando entre os comentários padrão e do Intense Debate para tentar encontrar o erro, creio que você tenha visitado o blog no momento do teste, rs.

    Agradeço a visita e os comentários. Volte sempre! Abraços.

    ResponderExcluir
  38. Ficou lindo o Blog ! PArabéns pelo talento!

    ResponderExcluir
  39. Edu, fala meu amigo, fico feliz que tenha gostado do novo template do blog!
    Agradeço o elogio e a visita, volte sempre!

    ResponderExcluir
  40. Igor,

    uma dúvida: a fonte padrão do meu layout é 14. Quando mando aumentar, ele diminui primeiro para depois subir a letra. Onde eu altero no código para ele aumentar direto e quanto resetar voltar para o 14?

    Abraço!

    ResponderExcluir
  41. Sybylla, para ajustar o script ao tamanho padrão do seu template, você deve mudar o primeiro valor do código do passo 4, como mostrado abaixo:
    if (obj.style.fontSize==""){obj.style.fontSize="12px"};
    Esse código aparece três vezes, a primeira para o botão de resetar; segunda para o botão de aumentar; e por fim, o botão de diminuir. Mude o valor 12px para 14px, nos três códigos. Isso deve resolver o problema. Qualquer coisa comente novamente. Abraços.

    ResponderExcluir
  42. olá!

    eu fiz tudo certinho,apareceram os botões no alto de cada post,mas a fonte só altera no primeiro post (o mais recente). Porque isso tá acontecendo? Nos outros posts mais antigos eu clico e não acontece nada com eles,vc percebe que houve mudança só no primeiro post,lá do alto.vejam o que acontece lá,façam o teste:
    www.anailustra.blogspot.com
    Eu testei nos navegadores Chrome, IE7 e no Firefox,e em todos eles aconteceu a mesma coisa.
    Muito obrigada!
    Abraços!

    ResponderExcluir
  43. A parte do número 10 não tem como colocar aqui,pois aquele código que manda-se substituir por aquele não tem no meu modelo.
    Se eu coloco essa parte 10 aqui,a Sidebar some,vai lá pra baixo.
    Elas é indispensável pros botões funcionarem,correto? Mas aqui do jeito que está,não posso colocá-la.
    E como resolvo isso?
    Obrigada!

    ResponderExcluir
  44. Anna Monteiro, responderei seus dois comentários em um só. Eu visitei o seu blog, com os navegadores Google Chrome, Firefox, Internet Explorer e Opera, e os botões não estão funcionando nem no primeiro artigo - pelo menos comigo. O código do passo 10 é realmente indispensável, pois é ele quem indica qual texto deve ser afetado pelos botões.

    O que eu pude perceber é que você utiliza um template não nativo do Blogger, o que faz com que seu template não possua alguns códigos. A única maneira de fazer os botões funcionarem seria fazer uma análise completa da estrutura do seu template ou você utilizar um dos templates disponíveis pelo Blogger.

    ResponderExcluir
  45. Oi Igor,tudo bom? Muito obrigada pela sua atenção e prestatividade!

    Puxa,que pena que isso não tem solução! Fui eu quem realmente criou a "carinha" dele lá....eu estava esperançosa,porque no meu blog as letras aparecem muito miúdas,e eu até hj não sei como mudar aquilo!

    No primeiro post,eu tinha conseguido fazer a fonte aumentar mas só na primeira vez.Depois eu fiquei mexendo de novo,e aí realmente não lembro o q alterei - só sei q depois eu não consegui fazer a fonte aumentar nem no primeiro post. Quando vc chegou lá pra ver,eu já havia mexido pela segunda vez,por isso vc não viu nada mudando.

    Se vc souber pelo menos então,como eu posso fazer a fonte dos posts mudarem de tamanho,te agradeço! Ajuda IMENSAMENTE!

    Abraços!

    ResponderExcluir
  46. Olá Anna, tudo ótimo e contigo?

    Então, não é que não haja solução, há sim, mas, como eu falei, seria necessário analisar os códigos do template para saber onde adicionar o código do passo 10. Se você quiser, entre em contato comigo que, assim que possível, eu darei uma olhada no seu template para lhe informar como instalar os botões.

    E quanto à aumentar o tamanho da fonte dos seus artigos, basta você procurar dentro do seu template o código mostrado abaixo.

    .post p, .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    }


    Quando achá-lo, substitua-o por esse outro código.

    .post p, .post-body {
    font-size:13px;
    margin:0 0 .75em;
    line-height:1.6em;
    }


    Altere o valor 13 para qualquer outro de sua preferência, assim as letras dos artigos ficarão maiores. Eu que agradeço as visitas e os comentários, volte sempre!

    ResponderExcluir
  47. oi Igor,boa noite!!
    Muito obrigada pelo código que me passou! Tudo deu certo aqui =)
    Te mandei mensagem através desse link de Contato que vc me passou.
    Muitíssimo obrigada!
    Abraços!
    Anna Monteiro

    ResponderExcluir
  48. Muito Obrigado Vlw eu coloquei no meu site em php deu certinho

    ResponderExcluir
  49. Vei, incrível o que vc faz por nós, estou viciado em seu blog.
    Muito obrigado, parabéns, e o script de alerta do IEca mim salvou, o IEca é horroroso...
    Vei muito sucesso para vc!

    Felipe Argôlo.

    ResponderExcluir
  50. brigadão aê!!!!!!! funcionou direitinho

    ResponderExcluir
  51. Obrigado pela dica Igor! Me ajudou muito. vlw!

    ResponderExcluir
  52. olá. Fiz na primeira vez e deu tudo certo. Na segunda (mudei template) não acontece nada. Obrigado

    http://transitoescola.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Sérgio, ao visitar seu blog e olhar o código-fonte do mesmo, eu não consegui encontrar o código que foi destacado em vermelho no passo 10 do tutorial. Tenha certeza de ter adicionado o código corretamente, pois é ele quem indica qual o texto deve ser alterado ao clicar no botão.

      Excluir
  53. Nunca consigo fazer esse efeito =/
    E meu blog precisa muito... =/
    Pena.

    ResponderExcluir
    Respostas
    1. Lua Lobo, ao visitar seus blogs eu notei que você utiliza um template que não é padrão do Blogger, o que, infelizmente, faz com que os códigos do seu template sejam diferentes dos códigos dos templates do Blogger. Só estudando a estrutura do seu template para saber como adaptar essa ferramenta ao seu template. Desculpe não poder ajudar de uma maneira mais efetiva!

      Excluir
  54. No meu o código não funciona, fiz tudo direitinho, mas não obtive nenhum resultado positivo :(

    ResponderExcluir
    Respostas
    1. Olá GCM Sites, ao verificar o código-fonte do seu blog, eu pude notar que está faltando o código que foi destacado em vermelho no passo 9 deste tutorial. O restante foi instalado corretamente! Adicione o código do passo 9 aonde foi indicado no tutorial, e isso deverá resolver o problema. Qualquer coisa, entre em contato novamente.

      Excluir
  55. Olá Igor

    Obrigado pela sua disposição e interesse em ajudar os outros.

    Sua visita ao meu site e o recado deixado nos Contatos foi uma surpresa para mim.

    Sua sugestão em modificar o passo 9, adicionando o id=TextFontButtons dentro do div class foi decisivo.

    Deu certo!

    Parabéns e que Deus te abençoe.

    Gilson de Moura
    Blog Missões e Adoração

    ResponderExcluir
    Respostas
    1. Olá Gilson, a finalidade do blog é justamente ajudar as pessoas, e é uma satisfação muito grande ver essa finalidade sendo cumprida. Quanto a dica que lhe forneci, fico feliz que tenha dado certo, pois como cada template possui um código diferente, é um pouco difícil acertar com todo mundo. Agradeço a visita e o comentário, volte sempre! Um abraço.

      Excluir
  56. Olá Igor, eu adorei seu post, fiz todo o processo direitinho, tenho certeza! Os botões aparecem lá, fiz passo a passo, mas quando clico não há alteração nenhuma, por favor, preciso muito disso! Me ajudaaaaaa!!! Meu blog é este: http://erageeks.blogspot.com/

    ResponderExcluir
    Respostas
    1. Olá Caroline, fico feliz que tenha gostado do artigo! Quanto ao seu problema, ao visitar o seu blog eu notei que o template não é nativo do Blogger, mas que é possível utilizar o recurso sem problemas. Ao analisar o código-fonte do seu blog, eu notei que não há o código que destaquei em vermelho no passo 9 do tutorial. Para resolver seu problema, faça o seguinte: Acesse o editor do seu template, e procure pelo código abaixo:
      <div class="post-body entry-content">
      Ao encontrar o código acima, adicione o id dentro do código. Ele deverá ficar da seguinte maneira:
      <div id="textFontButtons" class="post-body entry-content">
      Após ter feito isso, salve seu template. A partir desse momento o recurso já deverá estar funcionando normalmente em seu blog. Qualquer dúvida entre em contato novamente. Agradeço sua visita!

      Excluir
    2. Funcionou!!!! Muito Obrigada, obrigada mesmo! Desejo sucesso aí no seu blog! Você tem um diferencial dos outros blogueiros, realmente quer ajudar o leitor e entende do assunto, parabéns!

      Excluir
  57. Oi Igor achei muito lindo os botãozinhos lá no meu blog mais não quer funcionar.
    Me ajude.

    ResponderExcluir
    Respostas
    1. Olá Valquiria, desculpe a demora em responder! Eu visitei o seu blog e pude ver que você adicionou com sucesso as imagens dos botões, porém, eu não encontrei instalado em seu blog os demais códigos do tutorial. Para que o efeito funcione é necessário que você adicione ao seu template o código do passo 3 (que é o código que aumenta/diminui a fonte), o código destacado em vermelho no passo 9 (que indica qual texto deve ser aumentado/diminuído), e o código do passo 12 (que é o código do efeito de transparência dos botões). Após instalar esses códigos também o efeito deverá funcionar em seu blog! Se você tiver dúvidas ou dificuldade para instalar os códigos em seu blog, entre em contato comigo pelo menu Contato. Agradeço a visita e o comentário!

      Excluir