• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

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]

 

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn