Códigos e Scripts Postagens Vanessa S.
Script Aumentar Diminuir Letra do Texto no Post
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.
[becape]Recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.[/becape]
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 https://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 https://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 == "item"'>
<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>
[alerta]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[/alerta]
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)
” O sábio cria, o BURRO copia!”
Olá, olha eu to precisando muito disso, fiquei muito feliz qd achei esse post mais a alegria acabou assim que terminei todo o processo, não funcionou, fiz tudo direitinho, sem pular nenhuma parte, aparece a imagem mas não diminui nem aumenta, eu clico e nada, mas aparece em baixo no navegador como se fosse um link assim: javascript:fontMais()
Olá, fiz tudo certinho, mas alguma coisa não ta funcionado… Aparece a imagem com A +, A – mais quando clico o texto não aumenta nem diminui… poderia me ajudar?Se quiserem mando ouma copia do tempalte.
Não funciona Vanessa 🙁
Ola Vanessa. Estou com um problema para instalar está função ao meu Blog. Eu havia instalado o hack leia mais, do tutorial do seu blog também e tem uma parte do código que foi substituído pelo código do hack leia mais,mas precisamento os códigos do passo 3. como se deve proceder?
Também estou com este problema!! me ajude Por favor.
Olá Vanessa como vai?
Muito bom o teu site, extremamente fácil de entender todos processos complicados de html e scripts.
Obrigado por disponibilizar seu conhecimento. Nós blogueiros agradecemos!
Em primeiro lugar quero lhe agradecer pela excelente dica,e por seu esforço em desenvovlver este script, e assim o brindar para quem queira o usar,logico sempre dando os devidos creditos a voce,por este belo script.
Estou tendo alguns problemas:
Na parte em que voce indica para expandir os gadgets e localizar esta tag:
não a localizei, entao segui sua dica para isto procurando
por:
Mesmo fazendo esta pesquisa o mesmo nao localiza esta tag,entao eu
vasculhei o HTML usando apenas esta parte:
post-header-line-1’/
E com isso encontrei a tag sugerida,mas a um porém ao contrario de encontrar uma tag encontrei no minimo umas 18 tags com esta descriçao:
E agora qual devo mudar de:
para:
Mais uma vez lhe parabenizo, e agradeço quem poder me ajudar
desde ja.
Obrigado!!!
Aqui apareceu os botões, mas não pegou, não aumenta e nem diminui 🙁
Eu coloquei os ícones + e -, mais não funcionou, talves é o meu templante que não é suficiente para tal.Ai tive que retirar!!
Eu vou tentar corrigir esse problema, se não der certo vou retirar. Mesmo assim obrigado por mim ajudar!!
vc pode fazer de como almentar mais a caixa de comentario eu gostei muito do seu site
Deu tudo certinho! Aumenta e diminui as letras nas postagens, mas… ao aplicar este tutorial,(Hack "Leia Mais" Resumo de Postagem Automático com imagens na Página Inicial) deixou de funcionar!! Simplesmente desapareceu!! Pelos vistos, há incompatibilidade entre os dois. Não??
Porto, não há incompatibilidade não. O problema é que se vc instalou o script deste tutorial 1ª e depois instalou o recurso do hack leia mais, vc acabou desabilitando o script..vc terá que fazer a instalação deste tutorial de novo..ou seja, tem que reinstala-lo.
Clau, fiz tudo como o tutorial guiou, mas não está funcionando corretamente. Me recomenda alguma coisa que possa corrigir?
Oi, muito bom o teu blog.
Só deu um probleminha no meu blog: quando eu clico pra aumentar a letra em um post, as letras do post de cima que aumentam. Pra resolver, eu tirei essa opção da página inicial, a pessoa tem que entrar no post pra poder usar o aumenta/diminuir.
Vc sabe qual seria o problema?
Obrigado.
eu nao consegui fazer o segundo passo
Simplesmente o máximo, só aqui pra tudo tão mastigado, administro um site/blog e muita coisa foi feita através de seus tutorias.
Muitooooo obrigadoooooooo !!!
Não acredito que consegui!Eu tinha testado milhoes de blog e como voce disse nenhum deles funcionava !
So deu um probleminha que eu CONSEGUI arrumar !
Meu blog e sobre animais e nele instalei varios recursos como o linkwithin que justamente fica entre o codico do 3º passo !
Como tenho um pouco de experiencia com HTML tirei o codico do linkwithin substitui e funcionou…!!
Muito obrigado Equipe Mundo blogger !
Oi Clau, muito lindo esse script, mas tive um probleminha, qdo vou colocar a div da imagem para aum e diminuir (o botão de + e -) dá como imagem nao encontrada.. como faço?
valeu parabéns por todas as dicas!!!.
A imagem está ok?
eu fiz tudo certinho mas na hora a imagem apareceu a do sapinho, quando normalmente a imagem foi apagada ou coisa assim.
Quero te dar um parabéns e uma salva de palmas
Seu blog é um daqueles que coloca a "mão na massa" e isso é bastante legal e inclusive já utilizei diversas dicas daqui e nunca me deram problema
Meu muito obrigado!
Clau, você é O MÁXIMO!
Só pastei um pouco quanto ao lugar, mas foi só colocar um div pra alinhar à direita que ficou do jeitinho que eu queria.
Obrigada por sempre nos disponibilizar tutoriais perfeitos como esse! 😀
Olá Clau, fiz exatamente como no tutoria. as imagens de aumentar e diminuir estão aparecendo, porém nao funcionam! voce colocou em seu tutorial a seguinte frase: "Para um bom funcionamento deste script, será necessário que você inclua o arquivo javascript no seu template" bom meu erro deve estar ai. voce teria como explicar como fazer isso? grato e parabéns pelo blog.
ñ tem essa linha no meu Template
.(<div class='post-header-line-1'
Ótimo post e ótima dica. APenas uma observação: fui instalar e vi que as imagens estão no Imageshack e como ele anda não mostrando imagens, o pessoal tem que hospedar em outro lugar ou não vai ficar bom.
Assim que esse detalhe é resolvido, funciona tranquilo.
Nossa bem legal 😀
Alexandre
Muitos recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Olá,
Muito boa a dica, segui os passos e obtive sucesso!
Abraços!
Olá Clau, eu tenho hack "Leia Mais" e por isso não está igual ao meu código no passo 3. O que faço ?
Állefy Max C. Meneses
Como você pode ver eu uso este recurso aqui no blog, e isso não aconteceu. Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Jalls
Vc tem certeza que incluiu a tag de fechamento no final?
Reveja o tutorial, note q eu aviso que tem que colocar "/div", se não o blogger não vai aceitar o código mesmo.
Olá, eu copiei o código tudo certinho para que tivesse a opção de fonte (+A -a), só que no meu a tag tem a linha de comando com a barra no final, daí quando eu tiro a barra ocorre um erro no código no momento que eu tento salvar. A mensagem de erro fica logo acima da caixa de texto de códigos HTML dando esse aviso. como posso resolver esse problema?
sim Clau. Eu deletei o pot.
e Desculpa.
Kagome-chan
Se vc colou os icones exatamente no mesmo local indicado no tutorial, então vc pode incluir o trecho CSS:
.post-header-line-1{
}
e nele definir espaçamentos.
Deu certo, mas gostaria de saber como eu posso dar um espaço dos icones, pois ficaram assim: http://www.romszone.tk/2010/11/snes-legend-of-zeldabr.html
-=|G¡äñ|=-
Se vc notar, no final do artigo tem um aviso, onde eu falo: "Se quiser publicar este script em seu blog, fique á vontade, mas seja coerente, não plagie meu tutorial e dê os devidos créditos da postagem original, indicando um link para este artigo."
Eu autorizei que outros blogs divulguem,ou publiquem este script, mas NÃO AUTORIZEI QUE COPIASSE O MEU TUTORIAL, não autorizo que copie o meu texto de forma alguma. Não é pra reproduzir o meu texto.
Vc simplesmente copiou todo o meu artigo na íntegra!
Tudo bem que incluiu a informação da fonte e dos créditos, mas não é pra copiar o meu texto!
Eu acredito que vc tenha cometido esse erro involuntariamente e tenho certeza que vc irá corrigi-lo o quanto antes, não é mesmo?
Portanto, peço que vc corrija o seu post, redija o seu próprio texto de tutorial, por favor.
Obrigada.
Boa Tarde Clau,
eu reproduzi seu post mais dei todos os cretitos.
http://dicasestremas.blogspot.com/2010/10/script-aumentar-diminuir-letra-do-texto.html
muito show seu site!!!
Bjos.
Clau,eu uso o template mínima,e no meu blog não tem o ùltimo còdigo,como faço agora?
Telma Maciel
Vc não fez um backup do seu template antes de fazer a implementação? O.o
xiii…
No inicio ia tudo bem, mas depois do meio pro fim deu tudo errado. E o que consegui no meu blog foi diminuir a foto de início e nao consigo mais reverter. Quero meu blog como tava antes, pois nao consegui colocar esse script de aumentar e diminuir letra e modificou alguma coisa que nao deveria ter modificado na aparencia do meu blog quando inseri os passos em html.
Olá Clau 🙂
Já há um tempo que procurava por esta opção. Coloquei no blogue, e funcionou 100%. Somente fiz umas pequenas adaptações adequadas ao que pretendia.
Obrigado por toda essa Sua persistência e partilha.
Abraço.
Alezandri
Vlw clau excelente dica. Mais sucesso pra vc linda
XD
uhugalera:
Obrigada pela dica 😉
E obrigada tb pelo comentário…e volte sempre que precisar viu?
Hi, Clau…
Que dicas maravilhosas você tem por aqui, hein?
Usei esta, com pequenas alterações, para um template que estou personalizando para o meu blog, que em breve estará no ar, e ficou muito bacana!
Permita-me porém, e por favor, um questionamento: O atributo 'Alt' na linha indicada torna-se inócuo, creio. Ele deveria ser melhor posicionado na tag 'img'.
Outro atributo que, apesar das imagens usadas serem auto-descritivas, deveria ser indicado, na mesma tag 'img' é o 'title', por motivos óbvios.
Parabéns pelo blog e por seus posts interessantes!
[]'s @inaciorolim
Hi, Clau…
Que dicas maravilhosas você tem por aqui, hein?
Usei esta, com pequenas alterações, para um template que estou personalizando para o meu Uhu, Galera!…, que em breve estará no ar, e ficou muito bacana!
Permita-me porém, e por favor, um questionamento: O atributo 'Alt' na linha indicada torna-se inócuo, creio. Ele deveria ser melhor posicionado na tag 'img'.
Outro atributo que, apesar das imagens usadas serem auto-descritivas, deveria ser indicado, na mesma tag 'img' é o 'title', por motivos óbvios.
Parabéns pelo blog e por seus posts interessantes!
[]'s @inaciorolim
" O sábio cria, o BURRO copia!"
gostei desta frase hehehehehehehe
@sosvip:
Pode publicar sim, desde que dê os créditos de autoria ariginal indicando um link para este artigo, não vejo problema algum. Fica a vontade.
Boa tarde Clau!
Excelente tutorial!
Já publiquei em meu blog (SOSVIP) um tutorial semelhante.
Porém, ele aumenta todas as letras do blog, incluindo sidebar, etc…
Gostaria de saber se tenho permissão de incluir na postagem ou fazer mais uma em que eu possa disponibilizar esse tutorial, uma vez que fui bastante procurado por causa do artigo sobre aumentar e diminuir fonte.
Se permitido, gostaria ainda de fazer uma pequena alteração no código, disponibilizando o código de modo a aparecer nas postagens mesmo na página inicial. Uma vez que feito como você disponibilizou aqui o código só aparece quando selecionado um post específico.
Se você autorizar, farei a postagem e linkarei o Mundo Darkness. Do contrário, deixarei apenas o tutorial já publicado (http://sosvip.blogspot.com/2010/01/script-para-aumentar-eou-diminuir.html).
Se não for do seu agrado, não sinta-se reprimida em falar. A minha gratidão por toda ajuda que você já me prestou continua a mesma. Só tenho a lhe agradecer Clau.
Abração e aguardo sua resposta.
Consegui e já fica da cor do título, amei … valeu!!!
Honestamente Clau…
Nunca me arrependi, desde que descobri essa mina de ouro no google, bem ao acaso, quando já estava pronto a desistir de procurar por ajuda!
Esse tutorial veio bem na hora!
Te agradeço do fundo do meu coração pelas inúmeras vezes que me "aproveitei" da tua sabedoria. hehehehe
Muito Obrigado
É por essas que outras que eu amo e odeio blogger ao mesm otempo as coisas nunca vão na hora que eu quero..um dia faço funcionar da forma que quero hehehe
@Simbologia Maldita:
Dá uma olhada na Tabela de Serviços, e conforme haja interesse, entra em contato comigo por email, através do formulário de contato que eu te retorno.;)
Po..sacanagem ja tentei de toda forma…Clau quanto vc cobra pra concertar e reformular o theme do meu blog? Sou péssima em xml hehehe
@Igor Sousa:
Não aumentam pq o conteudo do blockquote está dentro de uma outra "div".Só se vc fizer a inclusão da "div id="textoFonte" manualmente.
@Giulio Gerosa, @Thiago
Vcs devem ter feito alguma coisa errada, tenta novamente pra ver se dá certo. Não tenho como ajudar, pois para cada caso é um caso, depende muito do template.
@João Pedro:
Sim, vc pode tentar dessa forma tb, é questão de testar e ver o que acontece.
@Simbologia Maldita:
Deve ser alguma coisa relacionada ao seu template, pq eu uso o código exatamente como está no tutorail, é o mesmo que uso aqui no Gothic Darkness, sem tirar nem por. Não sei dizer pq no seu ficou diferente Õ.õ
Pessoal, muito obrigada pela visita e pelos comentários. espero que voltem sempre!^^
Mas como eu faço pra aparecer só quando vc vai ver a postagem todo como vc fez aqui?
Penei pra por este codigo mas consegui kkkkkkkkkkkkkkkkk
Intereçante, Pena que meu templete é completamente modificado,
Eu amo modificar meu site, Dez das minimas coisas,
E que o deixão mais bonito,
Mais irei melhorar o seu designer em breve,
e que meu coreal draw esta com erro,
e não tenho como fazer os postes e designer dele,
e tiveque fazer o baner dele no pait, hehe
Obrigado Clau pela postagem, mas nao consigo salvar na segunda parte, o DIV sem a barra / finalizante (end tag). O que fazer?
Thanks
Giulio
http://www.massagemvitoria.blogspot.com
Olá
Acho que uma boa sugestão era colocar a div em data:post.body no editar html o que acha
Muito bom esse efeito..
Pena que meu template não esta aceitando..
Mas eu já conhecia antes esse efeito e sempre quis aprender como era.
Oi clau !
publiquei este post no meu blog
da uma olhadinha lá !
http://reidobloguinho.blogspot.com/2010/06/script-aumentar-diminuir-letra-do-texto.html
Ótimo script, vou colocá-lo no meu novo layout.
Só queria tirar uma dúvida, eu fiz um teste com esse script e deu tudo certo, mas eu percebi que o texto que há dentro do blockquote e do code não aumentam, só aumenta o texto que está no post, há alguma forma de fazer o texto do blockquote e do code aumentarem junto com o texto do post?
Parabéns pelo ótimo script!
@Fabiano Roberto:
Muito obrigada! Agradeço inclusive pelo comentário e pela visita. Volte sempre viu?
estou passando para avisar que seu blog está entre nossos Top Parcerios.
@Alberis Luís:
Obrigada pelo comentário…fico feliz que tenha gosatdo…usa sim, vc vai gostar…
Eu irei implementa-lo aqui no blog tb, mas deixei pra colocar no layout novo q logo vem por ai…=)
Adorei essa dica,fantástico.*_* Você sempre vem inovando a Blogosfera com suas ideias,vou tenar instalar no meu blogue.
Abraços!