sábado, 27 de março, 2010 às 07:59
Tutorial: Aumentar/Diminuir Fonte
A- A+

Acredito que todos sabem que uma das coisas que facilita a aceitação de um blog como bem estruturado é o tamanho da fonte dos textos. Mesmo algumas pessoas que enxergam direitinho, ás vezes sentem dificuldade de ler letras tão miúdas. E eu, particularmente acho falta de respeito com seus leitores, deixar uma size minúscula para leitura dos mesmos.

Outra coisa que não podemos negar, é que as fontes se mostram mais diferenciadas e mesmo bonitas, no tamanho pequeno. Eu mesma já testei diversas fontes nos mais variados tamanhos e sei que são mais lindas, miúdinhas. Então que saída pra essa enrascada? Um script que faz com que se aumente e/ou diminua o tamanho da fonte do texto principal. Eu uso aqui no meu blog e já que a Bia me perguntou comofas, vou ensinar agora. É bem simples.

Primeiramente, cole o código abaixo entre as tags <*head> e <*/head> do seu tema (sem as aspas):

<*script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra

// Para usar coloque o comando: “javascript:mudaTamanho(‘tag_ou_id_alvo’, -1);” para diminuir
// e o comando “javascript:mudaTamanho(‘tag_ou_id_alvo’, +1);” para aumentar

var tagAlvo = new Array(‘p’; //pega todas as tags p//

// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small…
var tamanhos = new Array( ‘9px’,'10px’,'11px’,'12px’,'13px’,'14px’,'15px’ );
var tamanhoInicial = 2;

function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];

selecionados.style.fontSize = tamanhos[ tamanho ];

for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra

<*/script>

É importante que você saiba direitinho o nome da tag que usa para editar a área de postagens do blog. E se não tiver, invente uma, só com as definições de letra ou tamanho ou qualquer coisa que não vá alterar a estrutura do tema.

Com base no item , você cola este código (sem as aspas) aonde quer que apareça a opção para aumentar/diminuir o texto. Lembre-se de colocar o nome correto da tag utilizada para definir a áera de postagem, no código abaixo eu coloquei content para exemplificar:

<*a class="menos" href="javascript:mudaTamanho('content‘,-1);” title=”Diminuir o texto.”>A-<*/a>
<*a class="mais" href="javascript:mudaTamanho('content‘, 1);” title=”Aumentar o texto.”>A+<*/a>

Prontinho, espero que tenham gostado e se encontrarem algum problema, deixe suas dúvidas na página Ask-me do blog, ok? Não responderei a dúvidas postadas nos comentários.



Arquivado em: Tutorial
488 views


» Deixe um comentário

Name:

Email:

Page:

Digite: Cute



。o゚。* 0 online - 18 visitas hoje - hits totais *。゚o。