Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos Javascript

Texto Animado Estilo Flash no Blog

Encontrei uma maneira de colocar um efeito no texto de forma animada (estilo flash), porém, não necessita utilizar flash para gerar este efeito.
O efeito para texto animado, utiliza um script, criado por dhteumeuleu e tem um efeito bem curioso e interessante de reutilização de pontos em comum em linhas sucessivas. Este efeito é bem interessante!
Clicando na imagem abaixo você pode ver um exemplo do texto em movimento.

demo1

Demo

A instalação é fácil, porque você só precisará adicionar um gadget do tipo “HTML/JavaScript” e colar o código do script disponível neste tutorial.

1. Código:


<style type="text/css">
#frm {
position: relative;
height: 150px;
width:630px;
font-size: 1.8em;
font-weight: bold;
font-family: verdana, arial;
background: transparent;
overflow: hidden;
padding: 0.5em}
#frm span {
position: relative;
text-align: center;
z-index: 1;
color:#ffffff;
}
#mtxform {
position: relative;
z-index: 10;
}
.hidden {
visibility: hidden;
}
</style><script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/texto-animado.js">
</script>
<div id="frm"></div>
<form id="mtxform" name="mtxform"><button id="show" class="hidden" onclick="mtx.show();" type="button">Replay</button><span id="inputext" class="hidden"><textarea id="text" rows="0" cols="0" name="text">
ESCREVA O TEXTO
QUE VOCÊ QUISER AQUI
</textarea><button onclick="mtx.changeText();" type="button">Play</button><input type="RESET" /></span></form>

 

2. Configurar o local onde o script será instalado – Acima da coluna de postagens:

Eu recomendo a instalação deste script acima da coluna de postagens,para ficar melhor destacado.
Antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possiblidade de adicionar um gadget acima da coluna de postagens, através do menu “layout”.
Se não houver, você terá que fazer algumas modificações no código. Siga este artigo e veja como Como instalar gadgets acima da coluna de postagens.

No menu “layout” , você verá um campo para “Adicionar Gadget” bem acima da coluna de postagens do blog, escolha a opção HTML/Javascript e cole o código.

3. Personalizar elementos:

No código acima, eu personalizei de acordo com as medidas e cores do meu template para testes.
Você deve personalizar alguns elementos para que o script funcione adequadamente de acordo com as medidas e cores de seu template,como cor de fundo, largura, altura e cor da fonte.
Edite os elementos contidos na primeira parte (CSS).
Vejamos:
height: 150px -> edite a altura aqui.
width:630px; -> edite largura.
background: transparent; -> edite a cor de fundo.
color:#ffffff; -> edite a cor da fonte.

Em alguns testes que realizei, conferi que o script funciona perfeitamente , mas a funcionalidade dele pode variar de acordo com o template.Lembre-se que Templates que possuem muitos scripts, acabam gerando “conflitos” entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
[alerta]ATENÇÃO:Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia esta dica: Por que alguns scripts não funcionam no meu blog?.[/alerta]

 



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

5 Comentários

  1. Lomeutec disse:

    Nossa! Quer fera isso! Fico impressionado com seus tutoriais. E olha que quase nunca comento. Parabéns.

    Sucesso para você.

  2. .:: Clau ::. disse:

    Tony Boy
    As partes que vc pode personalizar utilizando css já estão descritas no tutorial. Para maiores personalizações vc terá que mexer no js.Boa sorte, tomara que consiga.

  3. Tony Boy disse:

    Achei sensacional, ficou muito legal mesmo, só gostaria de saber se depois que as letras se posicionam elas ficam cinza. Eu tenho como mudar a cor delas já posicionadas?
    Obrigado!

  4. ::Clau:: disse:

    @GilgamesH:
    Para editar isso vc terá que mexer no js sim.Boa sorte, tomara que consiga.
    Obrigada pelo comentário e volte sempre!

  5. GilgamesH disse:

    Achei show esse código só queria mudar a fonte "quando gira" em laranja, mas tem que ser no arquivo js? mesmo assim já to usando ele laranja mesmo e baixei o js pra sofrer algumas horas ou dias tentando descobrir como fazer isso xD. Uma duvida pode ser o meu IEca que está com defeito, (mas como pode um naveagador defeituoso de fábrica tá com defeito? lol xD) e não visualiza nada no Dropbox sendo assim upei o js no WEBS ficou blz tenho upado tudo lá inclusive o Hack Resumo de postagens. ABS! e THKs clau + uma vez pelo tuto.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.