Cursos 24 Horas - Cursos 100% Online com Certificado

Adicionando links para Aumentar/Diminuir a letra no Blogger

4 Comentários Autor : Notícia e blog 28 Setembro 2009
Em sites de notícia (R7,G1) é comum vermos pequenos links de mais e menos que quando pressionados aumentam ou diminuem a letra facilitando a visualização do artigo.

No Blogger isto é possivel adicionando um pequeno JavaScript que é colocado acima da <body> ou seja acima do texto e um link de +A e -A para indicar ao leitor que pressionando ali o texto vai aumentar ou diminuir vamos ver abaixo como adicionar no Blogger;

Primeiro vamos acessar a area do html do Blogger

1.Faça Login no Blogger

2.Vá para "Layout"->"Editar Html"

Acrescentando o script no Blog


3.Procure pelo código abaixo utilizando as tecla Ctrl e F(atalho de pesquisa rápida):
</head>
Adicione o código abaixo acima do código anterior:
&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;15px&#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;


4.Salve as alterações.

Adicionando os links de -A - +A

5.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"
Adicione o código abaixo e salve:
<a class="menos" href="javascript:mudaTamanho('body', -1);" title="Diminuir tamanho do texto">-A</a> - <a class="menos" href="javascript:mudaTamanho('body', 1);" title="Aumentar tamanho do texto">+A</a>
6.Pronto, você adicionou com sucesso!

Aproveite e leve nossa caixa de busca personalizada!





Publicar comentário »
Tags: , , , ,

    4 Comentários

    zeppelim disse...
    15 de abril de 2010 05:02 #

    Sinceramente um dos melhores BLOGs. que já vi por aqui... excelente o trabalho de vocês ... PARABÉNS !!!

    abraço,


    zeppelim
    www.zeppelim.blogspot.com

    Responder comentário

    Rogério Maia disse...
    15 de junho de 2010 01:26 #

    O´TIMO, ADOREI AS DICAS E FUNCIONOU VIU GALERA
    PODE CONFIAR

    Responder comentário

    Jefferson disse...
    30 de abril de 2011 23:46 #

    Muito bom para quem quer uma aparencia melhor no blog e acima de tudo para quem quer trazer conforto para o usuário, muito boa dica!

    Responder comentário

    Thalita Oliveira disse...
    14 de agosto de 2011 11:23 #

    nhá, adorei *-*

    Responder comentário

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.

Assinar: Postar comentários (Atom)