Script para aumentar e/ou diminuir letras no blog com um botão.

Recentemente recebi um email de uma amiga preocupada com seus leitores míopes. Ela é a proprietária de um dos melhores blogs de história (não confundir com fábulas ou historinhas infantis) – a saber o Histoblog!

Depois de muita pesquisa (internet, amigos e um pequeno conhecimento pessoal) temos o prazer de disponibilizar esse Tutorial de como adicionar um script para os seus leitores aumentarem ou diminuírem a fonte de textos de seu blog ou site ao seu bel-prazer. Trata-se de um script simples, como a maioria dos que apresentamos aqui. Porém como você irá mexer no código fonte de seu template, recomendamos que você faça um backup de seu template.

Esse tipo de script é muito comum nas grandes páginas de notícias da internet. Você poderá observá- lo no portal G1 da Globo, por exemplo, logo abaixo do título do artigo no canto direito. Ex.: Globo

Vamos ao que interessa:

• No painel do Blogger, abra a aba Layout  
• Selecione Editar HTML
• Procure o seguinte código: </head>

OBS.: para facilitar a procura basta você pressionar as teclas CONTROL + F simultâneamente. Com isso abrirá um campo de busca onde você poderá colocar a palavra ou texto que procura.

• Adicione o código abaixo acima do código “</head>” que você já encontrou.

  &lt;script type=&quot;text/javascript&quot;&gt;
  // Início do código de Aumentar/ Diminuir a letra
  &nbsp;
  // Para usar coloque o comando: &quot;javascript:mudaTamanho(&#039;tag_ou_id_alvo&#039;, -1);&quot; para diminuir
  // e o comando &quot;javascript:mudaTamanho(&#039;tag_ou_id_alvo&#039;, +1);&quot; para aumentar
  &nbsp;
  var tagAlvo = new Array(&#039;p&#039;); //pega todas as tags p//
  &nbsp;
  // Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small&#46;..
  var tamanhos = new Array( &#039;9px&#039;,&#039;10px&#039;,&#039;11px&#039;,&#039;12px&#039;,&#039;13px&#039;,&#039;14px&#039;,&#039;16px&#039;,&#039;18px&#039;,&#039;20px&#039; );
  var tamanhoInicial = 2;
  &nbsp;
  function mudaTamanho( idAlvo,acao ){
  &nbsp;&nbsp;if (!document.getElementById) return
  &nbsp;&nbsp;var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
  &nbsp;&nbsp;tamanho += acao;
  &nbsp;&nbsp;if ( tamanho &lt; 0 ) tamanho = 0;
  &nbsp;&nbsp;if ( tamanho &gt; 6 ) tamanho = 6;
  &nbsp;&nbsp;tamanhoInicial = tamanho;
  &nbsp;&nbsp;if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
  &nbsp;&nbsp;
  &nbsp;&nbsp;selecionados.style.fontSize = tamanhos[ tamanho ];
  &nbsp;&nbsp;
  &nbsp;&nbsp;for ( i = 0; i &lt; tagAlvo.length; i++ ){
  &nbsp;&nbsp;&nbsp;&nbsp;tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
  &nbsp;&nbsp;&nbsp;&nbsp;for ( j = 0; j &lt; tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
  &nbsp;&nbsp;}
  }
  // Fim do código de Aumentar/ Diminuir a letra
  &nbsp;
  &lt;/script&gt;

 

• Agora salve as alterações feitas, porém você ainda não notará mudanças no seu blog.

Adicionando os links A+ e A- que farão o script funcionar

• No painel do Blogger, abra a página Layout
• Elementos da página
• Adicionar um gadget. Neste você escolherá a opção “HTML”
• Na opção HTML você irá colar o seguinte código:

<center><a class="menos" href="javascript:mudaTamanho('body', -1);" title="Diminuir tamanho do texto"><span style="font-weight:bold;">-A</span></a> -  <a class="menos" href="javascript:mudaTamanho('body', 1);" title="Aumentar tamanho do texto"><span style="font-weight:bold;">+A</span></a></center>

Prontinho, seus leitores com problemas de vista não terão mais do que reclamar! Agora é só receber os elogios!

Seja VIP, receba as novidades no seu email, clique no ícone...

Início