19 de janeiro de 2010

10

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!

VIP Tutoriais

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

10 comentários:

Unknown disse...

ótima dica, valeu mermo

Susi disse...

Valeu Marcelo, ficou Show, passa lá no blog pra ver. Adorei.
Como é bom ter amigos inteligentes, dedicados ao trabalho e ainda prestativos. Parabéns pelo tutorial.
Valeu!

Susi disse...

Ei, Tem algo diferente aqui, vc está mudando seu template?

Blog Espírita Celeiro de Luz disse...

Puxa vida!
Há tempos eu procurava por esse tutorial. Até encontrei alguns, mas nada tão simples e funcional como o teu.
Mto obg mesmo.

Renata Souza disse...

Acabei de receber uma reclamação do tamanho de minha fonte no blog!
Então...fui a caça de um script...
E achei este...Maravilhoso!!!

Funciona perfeitamente!
Ainda adicionei no lugar do link da letra -A e +A, uma imagem...
Ficou bem mais atrativo e hamonioso com o blog!
Muito Obrigado de coração!

Deus te Abençõe! =)

Renata

Lucas Santos disse...

veio, tem como esconder esse A+ A- e deixa-lo aparecer apenas qdo a pessoa estiver dentro da postagem?

Anônimo disse...

Questão resolvida!

Unknown disse...

Nao Funcionou ... hehehe
http://www.empregasaojosecampos.com/

SOSVIP disse...

Rafael Rodrigues: Infelizmente esse modelo de Template que você usa em seu blog apresenta alguns problemas para essa função.
Em breve (ainda esse mês) publicaremos outro tutorial que talvez se adeque a essa sua necessidade.

Copa Primo Fernandes disse...

Amigo, parabens pela postagem, muito bom e rapido, nem precisou fazer o backup, ficou simplesmente dez. Obg pela dica.

Postar um comentário

Agora você é VIP. A palavra está com você agora. Aproveite e faça seu comentário!
PS.: Se for xingar, ofender ou usar palavras de baixo calão, não perca o seu tempo pois CERTAMENTE excluiremos seu comentário!
Sinta-se a vontade.

Related Posts with Thumbnails