22/12/2009

Ferramenta para aumentar e diminuir o tamanho do texto no blog

Muita gente procura como colocar a ferramenta de zoom (aumentar e diminuir o texto) no blog, então encontramos esse código que funcionou perfeitamente no Internet Explorer e Firefox. O jeito de colocar essa ferramenta no seu blog é muito simples, basta entrar na pagina layout, adicionar gadget, html/javascript e colar o código abaixo:

<script><!--
var fs=new Array('12px','18px','22px','25px');var contador=0;function novoTamanho(x){if(x==0){if(contador<fs.length-1){contador++;document.getElementById("outer-wrapper").style.fontSize=fs[contador];document.getElementById("outer-wrapper").style.lineHeight=fs[contador];}}
if(x==1){if(contador>0){contador--;document.getElementById("outer-wrapper").style.fontSize=fs[contador];document.getElementById("outer-wrapper").style.lineHeight=fs[contador];}}}//-->
</script>
<a href="javascript:novoTamanho(0)" class="aumef bra" title="Aumenta a fonte Ctrl +">Mais Zoom</a><a href="javascript:novoTamanho(1)" class="aumef bra" title="Diminui a fonte Ctrl -">Menos Zoom</a>


Depois que colocar e testar o código no seu blog você pode personalizar como quiser o link para aumentar ou diminuir o texto escrevendo o que desejar onde está Mais Zoom e Menos Zoom, se preferir pode trocar por imagens usando o seguinte código no lugar de cada um desses textos:
<img src="endereço da imagem" border="0" />

Apenas tome cuidado para hospedar e usar o endereço correto da imagem no código. Outra coisa fácil de mudar é o texto que aparece quando colocamos o mouse sobre o link, veja no código onde está escrito: Diminui a fonte Ctrl- e Aumenta a fonte Ctrl +, depois caso quiser pode alterar para qualquer outro texto, mas lembre-se isso só aparece quando colocar o mouse sobre o link ou imagem que reduz ou amplia o texto do seu blog.

Outra coisa que podemos escolher no código são as opções de tamanho de fonte que usaremos, veja na primeira linha '12px','18px','22px','25px', você pode mudar para outros valores se quiser, apenas cuidado para não apagar os símbolos ao lado dos numeros. Mas você não deve colocar mais opções, ou seja apenas troque os valores que desejar.
Related Posts with Thumbnails

55 comentários:

  1. Oi,Fabiano!
    Vim agradecer as boas dicas sempre aqui e desejar um lindo Naral,cheio de Luz e muito amor! abração e que em 2010 nos encontrem,os sempre por aqui e por muito tempo ainda!chica

    ResponderExcluir
  2. Falaaa meu brother, como sempre cheio de novidades,e eu sempre por aqui procurando onde melhorar meu blog rs.

    quem puder me fazer uma visitinha tambem :D

    http://guiamd.blogspot.com

    ResponderExcluir
  3. Valeu dicas para blogs !

    Deu certo no meu blogger ... aqui quem fala é o Rodrigo do email que mandei sobre a postagem !!!

    ResponderExcluir
  4. Mais uma vez agradecemos, a importância de dividir conosco todos seus conhecimentos e dicas sempre contundentes. boas festas e tudo de bom!
    Abraços carlos.

    ResponderExcluir
  5. Fabiano Roberto estou com um Problema com meu Blog e quero que vc me ajude todas a letras que fica fora do Post
    Sempre fica encostado no lado direito do blog e quero que vc me ajude a consertar.

    Da uma olhada no meu blog
    http://www.pdc-downloads.blogspot.com

    e olha as ultimas palavras anbaixo
    ta a sim la

    SB-Downloads o Site Oficial do Download

    ResponderExcluir
  6. Há alguns dias sugeri que postasse algo sim e fiquei contente com a postagem já estou utilizando no meu blog jogotop.blogspot.com mas gostaira mesmo de algo que expandisse a area toda não apenas a fonte. Mesmo assim obrigado por se preocupar e colocar essa postagem muito legal. Valeu

    ResponderExcluir
  7. ThYaGo_PDC

    entre na pagina editar html e procure por:

    .sidebar .widget {
    padding:0pt 0px 10px;
    width:210px;
    border: 1px solid #FFFFFF;
    }


    e altere a linha padding:0pt 0px 10px; para:

    padding:0 0 10 5px;

    o numero 5 no final é a margem esquerda

    ResponderExcluir
  8. joakasfavio vou procurar um que ative o zoom diretamente pelo navegador

    ResponderExcluir
  9. Fabiano Roberto:
    Eu consegui pôr o a imagem mas ela fica gigante com dimuno ela?
    vlw

    ResponderExcluir
  10. Coloquei Mas Continua no canto esquerdo do Blog

    ResponderExcluir
  11. A e Tenho outro Problema e Mexendo sem saber no meu HTML Eu Alterei Alguma Coisa que Fez descer minha Segunda coluna a Direita como Faço Para Subir de novo?

    http://www.pdc-downloads.blogspot.com

    A eu tenho um Codigo que extremesse a pagina toda do site Igual ao MSN quando a gente Chama a Atenção de uma pessoa, Mas que Pena que Ele so Funciona com Internet Explorer.

    ResponderExcluir
  12. Meu Layout ta todo descomfigurado me ajuda ae não quero perder nada
    vou deixar uma foto la no Site do Layout

    Se Quizer eu Passo a senha do Blog Depois.

    http://www.pdc-downloads.blogspot.com

    ResponderExcluir
  13. World Soccer
    você precisa fazer a imagem no tamanho certo antes de usar no código reduzir a imagem no código até é possivel mas vai distorcer a imagem. É melhor usar um programa de edição de imagens para diminuir
    http://www.dicasparablogs.com.br/2008/08/programas-gratuitos-para-edicao-de.html
    e depois hospedar a imagem


    ThYaGo_PDC

    veja aqui sobre as larguras do blog provavelmente é isso que fez a coluna ir parar no final da postagem

    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

    ResponderExcluir
  14. Olá, querida(o)(s) amiga(o)(s)!
    de
    ___00000___00000_____
    __0000000_0000000___
    __000000000000000____
    ___0000000000000____
    ____00000000000___
    ______0000000____
    ________000_____
    _________0_____
    desejo a você(s) e toda
    a sua família ótimos
    preparativos,
    _________ 00____
    ___________ 000_
    FELIZ NATAL
    ______________ 00___
    _____________ 0___
    E PRÓSPERO ANO NOVO
    ___________ 0
    Bjs._______ 0*´¨)
    ___¸.•´¸.•*´¨) ¸.•*¨)
    Dô. (¸.•´(¸.•´

    ResponderExcluir
  15. Fabiano roberto Problema era o Seguinte...

    /*-- (Principal) --*/
    #main-wrapper {
    width: 545px;
    float: left;
    margin-top: 11px;
    margin-center: 10px;
    overflow:hidden;
    border: 3px solid #FF0000;

    Eu Tinha Alterado "float: left;" Por "float: center;" Foi Isso que Fez Minha Segunda Coluna Descer Mas Ta Resolvido.

    Obrigado Mesmo Por Tudo, Mais tem Um Problema Ainda Minhas Ultimas Letras la do Blog Continuam Encostado no Canto Esquerdo.

    www.pdc-downloads.blogspot.com

    ResponderExcluir
  16. ThYaGo_PDC
    para dar uma margem no canto use padding-left:10px;


    outra coisa float:center acho que não existe.

    ResponderExcluir
  17. Fiquei todo felizão quanto o código funcionou no meu blog para testes. Mas, quando fui utilizá-lo no blog de verdade não funcionou. Será que algum outro java script que utilizo (apenas no blog de verdade) interferiu ?

    ResponderExcluir
  18. Oi "Dicas". Obrigado por dividir conosco seus conhecimentos. Feliz Natal e Bom Ano Novo!
    JGP

    ResponderExcluir
  19. Foi Por Isso Que a Segunda Coluna Ficou Desconfigurada não existe float: center, Foi Como eu Disse Eu tinha Alterado float:left por float: center mas ja ta resolvido

    ResponderExcluir
  20. Tiozão das Batidas
    é possivel que outro código tenha dado problemas sim, principalmente se usou o mesmo código que colocou no blog de testes, afinal se funciona em um deveria funcionar em todos

    ResponderExcluir
  21. Gostaria de saber como retirar o compartilhamento de redes sociais no blog?

    ResponderExcluir
  22. Redação
    existem varios jeitos de colocar as redes sociais no blog, isso dificulta para dizer exatamente onde está o código.

    entre na pagina editar html, clique para expandir o modelo e procure pelo texto que aparece como link para as redes sociais ou pelo nome que aparece quando coloca o mouse sobre os links, deve achar o código então é só apagar, mas preste atenção para achar o inicio e final dos códigos e não apagar coisas além do que deveria.

    antes de começar faça um backup do seu modelo.

    ResponderExcluir
  23. Olá fabiano eu tenho um blog sobre gta (www.fangtasa.blogspot.com) eu sou fã do dicas para blogs sempre que entro aqui meu blog avança e eu decidi que vou pedir parceria

    www.fangtasa.blogspot.com por favor se você aceitar me avise!!! Estou ancioso por sua resposta!!!

    ResponderExcluir
  24. José luiz


    veja aqui sobre parcerias
    http://www.dicasparablogs.com.br/2009/07/parcerias.html

    ResponderExcluir
  25. Muito interessante essa dica, não conhecia.

    Parabéns!

    ResponderExcluir
  26. Olá professor Fabiano!

    Bom dia!

    Minha amiga visitou o meu blog, mas queixou-se, me disse:
    "Funcionou PARCIALMENTE o recurso de diminuir ou aumentar o zoom do texto!! Ihhh. Explico: percebi que a última mensagem se mantém intacta e nada foi alterada enquanto outras mensagens sim, foram alteradas!"

    Fui testar meu blog para aumentar mais zoom, percebi que três mensagens foram inactas ou não foram alteradas pelo mais zoom.

    Como reparo esse problema?

    ResponderExcluir
  27. Oi professor Fabiano, bom dia, por favor, responda ao meu comentário acima, pois preciso reparar um problema, o meu blog estará pronto amanhã.

    Obrigado pela atenção, compreensão e ajuda!

    Gustavo

    ResponderExcluir
  28. gustavo
    se no seu blog não funcionou o código, tente achar outro no google para fazer o efeito zoom, não tem como reparar o código.

    ResponderExcluir
  29. Não deu certo =/ Eu copiei o código certinho mas não funcionou. Não sei porquê...Bjs

    ResponderExcluir
  30. Isabel
    tem que ver o seu template se tem a tag outer-wrapper na formatação, repare que esse trecho aparece varias vezes no código, então ele tem que ser igual no seu blog.

    acho que os modelos novos usam tags diferentes

    ResponderExcluir
  31. Bom dia professor Fabiano

    Como eu já disse que o código de zoom do texto funcionou perfeitamente, mas quando eu troquei as palavras pelas imagens, fui testar, a janela aviso que deu erro. O que faço? Devo trocar novamente as imagens pelas palavras?

    Observação: Coloquei as tabelas no código de a href de Mais e Menos Zooms com imagens.

    Se você não me entender, clique no meu nome, visite o meu blog, teste os zooms do texto do meu blog e preste atenção à barra inferior da janela dizendo se dá errado ou não.

    ResponderExcluir
  32. talvez tenha apagado algo por engano na hora de colocar o código da imagem, era para funcionar normalmente

    ResponderExcluir
  33. Não funcionou em nosso blog. Se puder nos ajudar seremos gratos.

    ResponderExcluir
  34. veja os detalhes do código, talvez apagou alguma coisa por engano, ou na hora de copiar e colocar deu algum problema de codificação, copie o código coloque no bloco de notas e depois no blog.

    ResponderExcluir
  35. Oi! Eu usei com imagem e ficou show! Seria possível que uma lupa ficasse ao lado da outra?Valeu por mais esta lição!

    ResponderExcluir
  36. nos códigos das imagens é possivel coloca-las para o lado que desejar assim:

    <img style="float: right" src=....


    se quiser para o outro lado troque right por left

    ResponderExcluir
  37. Que estranho, esse código não quer funcionar no meu blog, nem no Chrome nem no Firefox. Por que será?

    ResponderExcluir
  38. Ah, andei lendo os comentários e suas informações... Parece que o código html não tem outer-wrapper.

    ResponderExcluir
  39. Sonia Boni, se quiser envie o link do seu blog para meu email e vou olhar o código dele.

    esse tutorial foi feito antes do lançamento dos novos modelos blogger(designer do modelo)

    ResponderExcluir
  40. Olá Fabiano.

    Eu utilizo o navegador ChromePlus, (versão 1.5.2.0), como padrão em meu PC, e como o texto do artigo dizia que só funcionaria para o Internet Explorer e Firefox, decidi instalá-lo assim mesmo, pois meus leitores que utilizam outros navegadores seriam beneficiados. Fiz o teste no Internet Explorer e correu tudo bem.

    E qual não foi minha surpresa, ao abrir meu blog em meu navegador padrão e constatar que a ferramenta estava funcionando ali também?! Fiquei super feliz. A ferramenta Zoom funcionou normalmente, mesmo sem que eu interagisse com o blog simulando o IE.

    Parabéns pelo artigo!

    Abraços.

    Samej Spenser.

    Ps.: Vou atualizar meu artigo sobre o novo visual do meu blog, e faço questão de adicionar o link deste artigo. Após ter feito esta atualização, volto aqui e deixo o link para o artigo.

    ResponderExcluir
  41. Olá Fabiano! É possível usar o esquema de zoom na janela de jogos flash, igual está no site ( www.agame.com ), em blogs hospedados no Blogger? Qual é o código usado no site? Onde posso achá-lo?
    Desde já agradeço a sua atenção.

    Forte Abraço.

    ResponderExcluir
  42. normalmente efeitos em flash são mais complicados ainda de colocar em sites ou blogs... não tenho tutorial sobre isso para o blogspot

    ResponderExcluir
  43. Olá Fabiano! Muito obrigado pela sua atenção. Realmente não parece ser muito fácil implementar o código no blog, mas o efeito é impressionante! Vale a pena o sacrifício. Vou continuar pesquisando para ver se consigo alguma coisa por ai. Valeu!

    Forte Abraço.

    ResponderExcluir
  44. Tenho uma duvida como coloco ``Tamanho do texto´´
    Igual nesse site: http://revistaautoesporte.globo.com/Revista/Autoesporte/0,,EMI286659-17042,00.html

    ResponderExcluir
  45. o código deste tutorial pode ajudar, mas em sites como globo.com eles tem muito mais recursos de webdesiner do que é possivel fazer em blogs

    ResponderExcluir
  46. porque será que não deu certo no meu, deu certo em 2 dos meus blog e em um não deu certo, algume pode me ajudar? noticiasrn@bol.com.br

    ResponderExcluir
  47. infelizmente alguns códigos dão erro nos novos templates do blogger

    ResponderExcluir
  48. Experimentei nos dois navegadores e deu errado, quero dizer não faz nada.
    Obrigado.

    ResponderExcluir
  49. eu vou testar o código e procurar algum novo código....

    obrigado por avisar

    ResponderExcluir
  50. Bom dia, Amigo!

    Este processo funciona para TEMPLATE RESPONSIVO?

    Desde já agradeço pela resposta.

    ResponderExcluir
  51. não fiz o teste em template responsivo, mas acho que deve funcionar, então você poderia testar, mas faça um backup do seu template antes de fazer qualquer alteração.

    ResponderExcluir