17 de janeiro de 2017

Script para aumentar ou diminuir texto das postagens no Blogger

Tags


Este script usa um jQuery muito simples afim de aumentar ou diminuir o tamanho da fonte de um artigo. É útil para você e seus usuários, especialmente aqueles com visão fraca. Este script é muito essencial se você quer manter a fonte do seu blog pequeno e, ao mesmo tempo, transformá-las em grandes para seus usuários.

Veja a demonstração:


Instalando o script em seu blog

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Modelo>Editar HTML do blog desejado e clique sobre o editor e tecle CTRL+F e procure por <div class='post-header-line-1'> e acima do trecho encontrado cole:
  3. <a href="#A+" id="increase">A+</a>
    <a href="#A-" id="decrease">A-</a>
  4. Depois procure por </body> e acima desse trecho cole:
  5. &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function() { 
      $(&#039;#increase&#039;).click(function(){    
            curSize= parseInt($(&#039;.post&#039;).css(&#039;font-size&#039;)) + 2;
      if(curSize&lt;=20)
            $(&#039;.post&#039;).css(&#039;font-size&#039;, curSize);
            });  
      $(&#039;#decrease&#039;).click(function(){    
            curSize= parseInt($(&#039;.post&#039;).css(&#039;font-size&#039;)) - 2;
      if(curSize&gt;=12)
            $(&#039;.post&#039;).css(&#039;font-size&#039;, curSize);
            }); 
     });
    &lt;/script&gt;
    Por padrão o script está definido para aumentar a fonte até 20px, e o tamanho mínimo é de 12px. Se você deseja alterar esse limite, altere o seguinte trecho:
    Aumentar o texto: curSize<=20 do #increase
    Diminuir o texto: curSize>=12 do #decrease
  6. Feito, clique em Salvar Modelo
Pronto, agora o script já vai  funcionar em suas postagens, mas lembre-se que está totalmente sem personalizar a aparência dos botões, personalize-o como quiser no CSS.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 12 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

2 comentários

Amigo esta parte do código da erro no meu template como faço?

if(curSize<=20)

Olá Luiz,

Acabei de atualizar o código na postagem. Pode tentar novamente por favor?

Qualquer coisa me avise.

Abs


Abrir lista de emoticonFechar lista de emoticon