Como Colocar Texto em Movimento (Letreiro Animado) no Blog

Veja um código HTML para colocar mensagens animadas no blog (letras com movimento). Usando esse Java script criamos um gadget com as letras em movimento no seu blog ou site. Você pode escolher (escrever) algumas frases de boas vindas para os visitantes do seu blog e com isso ter mais uma opção para atrair a atenção das pessoas que visitam seu blog.

Colocar Gadget com Texto (Frases) em Movimento no Blog

Para adicionar esse gadget com frases de boas vindas ou qualquer outra mensagem animada no seu blog entre na pagina layout > adicionar gadget > html/javascript e adicione o código abaixo:

<div style="padding-top:20px;height:100px;">
<script>
var text=new Array()
var textsplashcolors=new Array()
/////////////////////////////////////////////
// START OF CONFIGURATION ZONE //
/////////////////////////////////////////////
// your messages. Add as many as you like
text[0]="Frase 1"
text[1]="Frase 2"
text[2]="Frase 3"
text[3]="Frase 4" // letter-color
textsplashcolors[0]="#0F0273"
// font
var textfont="Times"
// font-size (pt)
var textfontsize=10
// font-weight, enter "normal" or "bold"
var textweight="normal"
// font-style, enter "normal" or "italic"
var textitalic="normal"
// pause between messages (seconds)
var textpause=2
// the path of the movement (x-coordinate, y-coordinate and so on). Tip: use your imagemap-tool to set a path of your own (just extracte the coordinates from your imagemap-tool)
var textpath=new Array(97,5,91,5,90,5,85,7,77,10,71,13,65,14,59,15,54,17,48,20,43,24,38,27,34,31,30,37,24,43,20,49,18,52,17,58,15,65,14,70,12,75,12,80,12,86,12,96,12,100,17,112,21,121,24,126,31,135,37,140,48,141,56,142,64,143,73,143,81,143,89,143,95,143,104,143,109,143,117,142,123,137,126,132,126,124,126,117,126,113,121,108,114,103,103,98,91,92,80,87,71,82,69,81,69,77,69,71,69,62,69,54,70,47,73,41,80,35,84,31,94,28,107,27,126,30,140,43,142,54,141,64,134,71,122,76,110,78,101,82,93,90,90,96,89,104,89,112,96,121,113,130,133,130,146,127,160,121,171,111,176,99,176,86,176,73,176,63,176,51,174,45,170,37,164,28,161,24,148,16,134,11,122,7,104,4,93,4,85,4,74,4,67,4,60,4,48,4,35,4,25,4,18,4,9,4,8,4,8,4,0,0,0,0)
/////////////////////////////////////////////
// END OF CONFIGURATION ZONE //
/////////////////////////////////////////////
// DO NOT EDIT CODE BELOW THIS LINE
var textfontsizeHTML=3
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var windowwidthOri=330
var windowheightOri=250
textpause*=1000
var spanwidth=new Array()
var i_colors=0
var letterspace=Math.floor(textfontsize/1.4)
var tickerleft=textpath[textpath.length-2]
var tickertop=textpath[textpath.length-1]
var timer
var finalxpos=tickerleft
var i_text=0
var textsage=""
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var message=new Array()
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var textpathx= new Array()
var ii=0
for (i=0;i<=textpath.length-1;i=i+2) {
textpathx[ii]=textpath[i]
ii++
}
ii=0
var textpathy= new Array()
for (i=1;i<=textpath.length-1;i=i+2) {
textpathy[ii]=textpath[i]
ii++
}
for (i=0;i<=text.length-1;i++) {
if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
message[i]=text[i]+" "
}
var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
xpos[i]=5000
}
var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
ypos[i]=5000
}
function randomizer(range) {
return Math.floor(range*Math.random())
}
function resettextpath() {
if (ie) {
windowheight=parseInt(document.body.clientHeight)
windowwidth=parseInt(document.body.clientWidth)
}
if (ns4 || ns6) {
windowheight=parseInt(window.innerHeight)
windowwidth=parseInt(window.innerWidth)
}
windowwidthfactor=windowwidth/windowwidthOri
windowheightfactor=windowheight/windowheightOri
for (i=0;i<=textpathy.length-1;i++) {
textpathy[i]=Math.floor(textpathy[i]*windowheightfactor)
}
for (i=0;i<=textpathx.length-1;i++) {
textpathx[i]=Math.floor(textpathx[i]*windowwidthfactor)
}
changetextsage()
}
function makesnake() {
if (i_textpath<=textpathx.length-1) {
for (i=textsage.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]
ypos[i]=ypos[i-1]
}
xpos[0]=textpathx[i_textpath]
ypos[0]=textpathy[i_textpath]
if (ie) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posLeft=xpos[i]+(i*letterspace)
thisspan.posTop=ypos[i]
}
}
if (ns6) {
for (i=0; i<textsage.length-1; i++) {
document.getElementById('span'+i).style.left=(xpos[i]+(i*letterspace))+"px"
document.getElementById('span'+i).style.top=ypos[i]+"px"
}
}
if (ns4) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]+(i*letterspace)
thisspan.top=ypos[i]
}
}
i_textpath++
timer=setTimeout("makesnake()",20)
}
else {
clearTimeout(timer)
getfinalpos()
}
}
function getfinalpos() {
if (ie) {
x_finalpos[0]=parseInt(document.all.span0.style.posLeft)
y_finalpos=parseInt(document.all.span0.style.posTop)
for (i=1;i<textsage.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
}
gotofinalpos()
}
if (ns4) {
x_finalpos[0]=parseInt(document.span0.left)
y_finalpos=parseInt(document.span0.top)
for (i=1;i<textsage.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
}
gotofinalpos()
}
if (ns6) {
x_finalpos[0]=parseInt(document.getElementById('span0').style.left)
y_finalpos=parseInt(document.getElementById('span0').style.top)
for (i=1;i<textsage.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
}
gotofinalpos()
}
}
function gotofinalpos() {
if (ie) {
if (i_loop<=max_loop-1) {
for (i=1;i<textsage.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[i]
thisspan.posTop+=y_step[i]
}
i_loop++
var timer=setTimeout("gotofinalpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("endposition()",textpause)
}
}
if (ns4) {
if (i_loop<=max_loop-1) {
for (i=1;i<textsage.length-1;i++) {
var thisspan=eval("document.span"+i)
x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)
thisspan.left+=x_step[i]
thisspan.top+=y_step[i]
}
i_loop++
var timer=setTimeout("gotofinalpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("endposition()",textpause)
}
}
if (ns6) {
if (i_loop<=max_loop-1) {
for (i=1;i<textsage.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
thisspan.left=parseInt(thisspan.left)+x_step[i]+"px"
thisspan.top=parseInt(thisspan.top)+y_step[i]+"px"
}
i_loop++
var timer=setTimeout("gotofinalpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("endposition()",textpause)
}
}
}
function endposition() {
if (i_endposition<=endpausemilli) {
if (ie) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posTop+=Math.ceil(8*Math.random())-4
}
}
if (ns6) {
for (i=0; i<textsage.length-1; i++) {document.getElementById('span'+i).style.top=parseInt(document.getElementById('span'+i).style.top)+Math.ceil(8*Math.random())-4+"px"
}
}
if (ns4) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.top+=Math.ceil(8*Math.random())-4
}
}
i_endposition++
timer=setTimeout("endposition()",10)
}
else {
clearTimeout(timer)
i_endposition=0
endposition2()
}
}
function endposition2() {
if (i_endposition<=20) {
if (ie) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.all.span"+(i)+".style")
thisspan.posTop+=Math.ceil(80*Math.random())-40
}
}
if (ns6) {
for (i=0; i<textsage.length-1; i++) {
document.getElementById('span'+i).style.top=parseInt(document.getElementById('span'+i).style.top)+Math.ceil(80*Math.random())-40+"px"
}
}
if (ns4) {
for (i=0; i<textsage.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.top+=Math.ceil(80*Math.random())-40
}
}
i_endposition++
timer=setTimeout("endposition2()",20)
}
else {
clearTimeout(timer)
i_endposition=0
cleartextsage()
}
}
function cleartextsage() {
finalxpos=tickertop
i_textpath=0
for (i=0;i<=maxtextlength;i++) {
xpos[i]=-5000
}
if (ie) {
for (i=0;i<=maxtextlength;i++) {
var thisspan = eval("document.all.span"+i)
thisspan.innerHTML=" "
thisspan.style.posLeft=xpos[i]=-5000
}
}
if (ns6) {
for (i=0;i<=maxtextlength;i++) {
document.getElementById('span'+i).innerHTML=" "
document.getElementById('span'+i).left=xpos[i]=-1000+"px"
}
}
if (ns4) {
for (i=0;i<=maxtextlength;i++) {
var thisspan = eval("document.span"+i+".document")
thisspan.write("<p> </p>")
thisspan.clear()
thisspan = eval("document.span"+i)
thisspan.left=-5000
}
}
timer=setTimeout("changetextsage()",textpause)
}
function changetextsage() {
var textsa=message[i_text]
textsage=textsa.split("")
if (ie) {
for (i=0;i<=textsage.length-1;i++) {
var thisspan=eval("document.all.span"+i)
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsage[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
spanwidth[i]=Math.round(thisspan.offsetWidth*1.3)
if (spanwidth[i]==0) {spanwidth[i]=parseInt(textfontsize)}
}
}
if (ns6) {
for (i=0;i<=textsage.length-1;i++) {
var thisspan=eval(document.getElementById('span'+i))
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsage[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.3)
if (spanwidth[i]==0) {spanwidth[i]=textfontsize}
}
}
if (ns4) {
for (i=0; i<textsage.length-1; i++) {
var thisspan=eval("document.span"+i+".document")
thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsage[i]+textweightB+textitalicB+"</font></p>")
spanwidth[i]=Math.round(thisspan.width*1.3)
if (spanwidth[i]==0) {spanwidth[i]=textfontsize}
thisspan.clear()
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
}
for (i=0; i<textsage.length-1; i++) {
var thisspan=eval("document.span"+i)
thisspan.visibility="show"
}
}
i_text++
if (i_text>=text.length) {i_text=0}
finalxpos=tickertop
i_textpath=0
makesnake()
}
document.write("<div id='roof' style='position:relative;width:1px; height:1px;'>")
if (ie) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position:absolute'>")
document.write(textsage)
document.write("</span>")
}
window.onload=resettextpath
}
if (ns6) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position:absolute;'>")
document.write(textsage)
document.write("</span>")
}
window.onload=resettextpath
}
if (ns4) {
for (i=0;i<=maxtextlength;i++) {
document.write("<layer name='span"+i+"' visibility=hide>")
document.write(textsage)
document.write("</layer>")
}
window.onload=resettextpath
}
document.write("</div>")
</script></div>

Apesar de ser um código grande, nós vamos editar apenas um pequeno trecho para alterar as frases, tamanho, cor e estilo das letras das mensagens. Veja abaixo o que vamos modificar neste código:

div style="padding-top:20px;height:100px;"  - Esse código CSS define um espaço para sua mensagem de boas vindas. O numero 100 é a altura do gadget e o numero 20 a margem superior, ou seja, cria um espaço vazio acima do texto. - Veja mais informações sobre a Diferença entre Margin e Padding

text[0]="Frase 1"
text[1]="Frase 2"
text[2]="Frase 3"
text[3]="Frase 4"
Para essas linhas a explicação é obvia: escreva o que quiser no lugar de frase 1, frase 2 e assim por diante.

textsplashcolors[0]="#0F0273" - cor das letras. Veja o Código das Cores

var textfont="Times" - tipo de fonte do gadget.

var textfontsize=10 - tamanho da fonte

Veja algumas dicas para ajudá-lo a editar as fontes deste gadget no seu blog:
Modificar Cores, Tamanho e Tipos das Letras no Blog
Gerador de Código HTML das Cores
Efeitos em Links Usando Gifs Animados como Imagens de Fundo

Como já falamos o código é grande e existem outros detalhes que podemos alterar. Então se quiser fazer testes poderá achar outras modificações possíveis de fazer, mas lembre-se sempre de salvar uma copia do código antes de começar novos testes assim se ocorrer algum erro você não perderá todo seu trabalho.

Veja outros acessórios para blogs:
Como Colocar Efeito Arco-Íris nos Links do Blog
Gadget de Posts Aleatórios com Imagens no Blogger
Como Colocar Imagens e Frases Aleatórias no Blog

Achamos esse código do gadget de mensagens animadas para colocar frases de boas vindas no blog com texto em movimento no site: avdhoot blogger. Esperamos que gostassem deste acessório para usar no blog, mas lembre-se de avaliar se esse é um acessório útil para o seu blog, afinal sempre temos que pensar na opinião das pessoas que visitam o blog antes de qualquer mudança no blog. Abraços e Sucesso!

Veja mais Dicas e Tutoriais: > Acessórios > Dicas para Sites > Gadgets > Scripts