sábado, 9 de julho de 2016

Como Aumentar Ou Diminui O Tamanho de Letra do Blog - Aprenda Aqui ( Tutorias Basicos )

Esses dias, estava criando um template exclusivo para um cliente, e eis que o mesmo me solicitou que instalasse, em seu novo template, o recurso para que seus leitores pudessem aumentar ou diminuir a letra dos textos em seu blog.
Para atender ao pedido do cliente, recorri ao google, bem como a varios outros metablogs que conheço, afim de encontrar algum código que conseguisse dar este efeito.
Encontrei diversos tutoriais publicados com scripts para este efeito.
Conforme eu ia encontrando, ia testando. Acontece, que em todos tutoriais que encontrei e testei, em apenas 5% dos tutorais publicados, o código funcionava realmente. Porém, não da maneira que meu cliente e eu queriamos, pois quando instalava o script e clicava no icone para aumentar a letra, acabava aumentando as letras do blog inteiro. E isso acabava gerando uma desconfiguração total no template. Por mais que eu clicasse para diminuir a letra, ela não voltava ao normal. Em todos os scripts que encontrei ao tentar aumentar ou diminuir a letra, acabava interferindo nas demais fontes do blog. Ou seja, não achei nenhum script sequer que aumentasse apenas a letra do texto.E o pedido do meu cliente era para que aumentasse/diminuisse apenas a fonte do texto.
Como sou persistente, curiosa e inxirida, eu não desisti, e fui estudando todos os scripts, um a um e tentando encontrar uma solução e tentar fazer como que funcionasse do jeito que eu queria que ele funcionasse.
Graças a essa minha persistência e curiosidade, consegui encontrar uma solução e desenvolver um script que funciona perfeitamente. 
É obvio que só consegui este feito, ás custas de muitos testes, e finalmente consegui entender o mistério, e fiz uma especie de fusão de vários scripts em um só, inserindo e retirando alguns comandos.


Agora chega de explicações, porque vou ensinar a vocês como instalar esse recurso no Blogger.
Recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.


Para um bom funcionamento deste script, será necessário que você inclua o arquivo javascript no seu template, e depois terá que fazer algumas edições em seus antigos posts, caso contrário ele não irá funcionar. Portanto siga todos os passos de acordo com este tutorial.
Vamos lá?
1º Passo – Instalar o script:

No painel do blogger, acesse o menu “modelo”, clique em “editar HTML”, não precisa clicar em “expandir modelos de widgets” e procure pela tag </head>
e cole o seguinte código ANTES dela: (não altere nada no código)

<!-- Script Aumentar/Diminuir Fonte by http://www.mundoblogger.com.br/ -->
<script type='text/javascript'>
//<![CDATA[
function fontMais(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontMenos(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>
<!-- Fim Script Aumentar/Diminuir Fonte by http://www.mundoblogger.com.br/ -->




Salve as modificações.
2º Passo – colocar os ícones clicaveis para dar o efeito:

Volte no menu “modelo”, clique em “editar HTML”, marque a opção em “expandir modelos de widgets” e procure pela tag
<div class=’post-header-line-1′>
Logo ABAIXO dela, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a alt='Aumentar fonte' href='javascript:fontMais()'><img src='http://img405.imageshack.us/img405/2006/fontmais.gif'/></a>
<a alt='Diminuir fonte' href='javascript:fontMenos()'><img src='http://img707.imageshack.us/img707/359/fontmenos.gif'/></a>
</b:if>


Salve!
O código acima está configurado para aparecer somente nas páginas internas (postagens), caso queira que apareça também na página inicial, basta retirar a 1º e a última linha do código, que estão destacadas em vermelho.

Se quiser alterar a imagem/icone, substitua o endereço da imagem no código acima, pelo endereço da sua imagem.

ATENÇÃO: Se o código estiver assim: <div class=’post-header-line-1′/>
com a barra no final, substitua-o por:

<div class='post-header-line-1'>

</div>

Importante:
A tag <div class=’post-header-line-1′> é a linha que se refere aos elementos que aparecem abaixo do título dos posts. Todo código que você colar abaixo dessa linha de código, aparecerá seguindo o título de seus artigos.Se preferir, instalar os icones em outro local, veja neste post outras opções
3º Passo – incluir código html dentro do corpo das postagens:

Volte no menu “modelo”, clique em “editar HTML”, marque a opção em “expandir modelos de widgets” e procure pelo seguinte código:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Substitua TODO o código citado acima por este:

<div class='post-body entry-content'>
<div id="textoFonte">
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats --> </div>
</div>


Visualize seu blog. Se você tiver feito tudo certinho, TODOS os seus posts estarão automaticamente com o Script.

Quero agradecer ao Matheus Serafim pela colaboração (magnifica por sinal) e dar-lhe os parabéns por ter conseguido encontrar uma maneira de incluir o código html (o do 3º passo) sem ter a necessidade de editar todos as postagens já publicadas.
Neste tutorial, eu havia explicado que para fazer o script funcionar até nas postagens antigas no seu blog,você teria que editar as postagens uma a uma, incluindo a linha de código HTML. Este método ia ficar bem cansativo para os blogs que possuem muitas postagens. Mas graças a idéia do Matheus, não há mais necessidade de editar nenhuma postagem para fazer o script funcionar, pois ele entrou em contato comigo, me avisando que encontrou uma solução, eu testei, aprovei, e atualizei o tutorial para que vocês sigam os novos passos 
((atualizado em 21/06/10))

Se quiser publicar este script em seu blog, fique á vontade, mas seja coerente, não plagie meu tutorial, (não copie e nem reproduza o meu texto de forma alguma) e dê os devidos créditos da postagem original, indicando um link para este artigo.
Evite punições do google. (#fikdik)

0 comentários:

Copyright © 2016 Calemba2-Muzik | Download Mp3 Todos direitos reservados-Angola