Autor: Portal Lovato | Publicado: 2011-05-23T11:16:00-07:00

Texto se movendo


Aprenda aqui, como fazer um texto se mover horizontalmente, com possibilidade de você mudar a cor, fonte, tamanho, etc.




Dicas Tumblr - Dicas, Truques e Tutoriais para a utilização e customização do seu Tumblr.


1º Passo) Entre no site http://www.myspacegens.com/handler.php?gen=marquee

2º Passo) Editar o código, é bem simples. Na imagem abaixo esta escrito o que cada opção faz.
 Conforme você for mudando as opções olhe em Live Preview para ver como esta ficando o seu texto.

Após terminar de modificar tudo o que você quer aperte Submit  Feito isso irá carregar uma nova página com um código  3º Passo) Copie esse código 4º Passo) Vá no Tumblr &gt;&gt; Customize &gt;&gt; Info e cole o código na descrição.&nbsp;

Colocar frase subindo e descendo
Vou ensinar como colocar &nbsp;uma frase subindo ou descendo. Como o exemplo abaixo.
Acessórios para Tumblr
Para colocar esse efeito é muito simples:


1º Passo)&nbsp;Copiar o código abaixo

&lt;marquee class="marquee" direction="down" height100="" scrollamount="3"&gt;Dicas Tumblr &lt;/marquee&gt;
2º Passo)&nbsp;Editar o código, se você quiser que a frase suba, no lugar do&nbsp;downdestacado em azul coloque up. Para aumentar a velocidade com que a frase desce ou sobe é só mudar o número destacado em vermelho. Quanto maior o número, maior será a velocidade.

3º Passo)&nbsp;Tumblr &gt;&gt; Customize &gt;&gt; Info &gt;&gt; Cole o código na sua descrição.

4º Passo)&nbsp;Comentar aqui se deu certo.






Estrelinhas caindo do mouse com duas cores
Saiba como fazer estrelinhas caindo do mouse com duas cores (as de sua preferência)Para ver as estrelinhas Clique Aqui
1º Passo) Copiar o código abaixo



&lt;script type="text/javascript"&gt;
// &lt;![CDATA[
var colour="#00FF00";
var colour3="#FF0000";
var sparkles=70;


var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();


window.onload=function() { if (document.getElementById) {
&nbsp;&nbsp;var i, rats, rlef, rdow;
&nbsp;&nbsp;for (var i=0; i&lt;sparkles; i++) {
&nbsp;&nbsp; &nbsp;var rats=createDiv(3, 3);
&nbsp;&nbsp; &nbsp;rats.style.visibility="hidden";
&nbsp;&nbsp; &nbsp;document.body.appendChild(tiny[i]=rats);
&nbsp;&nbsp; &nbsp;starv[i]=0;
&nbsp;&nbsp; &nbsp;tinyv[i]=0;
&nbsp;&nbsp; &nbsp;var rats=createDiv(5, 5);
&nbsp;&nbsp; &nbsp;var rats=createDiv3(5, 5);


&nbsp;&nbsp; &nbsp;rats.style.backgroundColor="transparent";
&nbsp;&nbsp; &nbsp;rats.style.visibility="hidden";
&nbsp;&nbsp; &nbsp;var rlef=createDiv(1, 5);
&nbsp;&nbsp; &nbsp;var rlef=createDiv3(1, 5);
&nbsp;&nbsp; &nbsp;var rdow=createDiv(5, 1);
&nbsp;&nbsp; &nbsp;var rdow=createDiv3(5, 1);
&nbsp;&nbsp; &nbsp;rats.appendChild(rlef);
&nbsp;&nbsp; &nbsp;rats.appendChild(rdow);
&nbsp;&nbsp; &nbsp;rlef.style.top="2px";
&nbsp;&nbsp; &nbsp;rlef.style.left="0px";
&nbsp;&nbsp; &nbsp;rdow.style.top="0px";
&nbsp;&nbsp; &nbsp;rdow.style.left="2px";
&nbsp;&nbsp; &nbsp;document.body.appendChild(star[i]=rats);
&nbsp;&nbsp;}
&nbsp;&nbsp;set_width();
&nbsp;&nbsp;sparkle();
}}


function sparkle() {
&nbsp;&nbsp;var c;
&nbsp;&nbsp;if (x!=ox || y!=oy) {
&nbsp;&nbsp; &nbsp;ox=x;
&nbsp;&nbsp; &nbsp;oy=y;
&nbsp;&nbsp; &nbsp;for (c=0; c&lt;sparkles; c++) if (!starv[c]) {
&nbsp;&nbsp; &nbsp; &nbsp;star[c].style.left=(starx[c]=x)+"px";
&nbsp;&nbsp; &nbsp; &nbsp;star[c].style.top=(stary[c]=y)+"px";
&nbsp;&nbsp; &nbsp; &nbsp;star[c].style.clip="rect(0px, 5px, 5px, 0px)";
&nbsp;&nbsp; &nbsp; &nbsp;star[c].style.visibility="visible";
&nbsp;&nbsp; &nbsp; &nbsp;starv[c]=50;
&nbsp;&nbsp; &nbsp; &nbsp;break;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;for (c=0; c&lt;sparkles; c++) {
&nbsp;&nbsp; &nbsp;if (starv[c]) update_star(c);
&nbsp;&nbsp; &nbsp;if (tinyv[c]) update_tiny(c);
&nbsp;&nbsp;}
&nbsp;&nbsp;setTimeout("sparkle()", 40);
}


function update_star(i) {
&nbsp;&nbsp;if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
&nbsp;&nbsp;if (starv[i]) {
&nbsp;&nbsp; &nbsp;stary[i]+=1+Math.random()*3;
&nbsp;&nbsp; &nbsp;if (stary[i]&lt;shigh+sdown) {
&nbsp;&nbsp; &nbsp; &nbsp;star[i].style.top=stary[i]+"px";
&nbsp;&nbsp; &nbsp; &nbsp;starx[i]+=(i%5-2)/5;
&nbsp;&nbsp; &nbsp; &nbsp;star[i].style.left=starx[i]+"px";
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;else {
&nbsp;&nbsp; &nbsp; &nbsp;star[i].style.visibility="hidden";
&nbsp;&nbsp; &nbsp; &nbsp;starv[i]=0;
&nbsp;&nbsp; &nbsp; &nbsp;return;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;else {
&nbsp;&nbsp; &nbsp;tinyv[i]=50;
&nbsp;&nbsp; &nbsp;tiny[i].style.top=(tinyy[i]=stary[i])+"px";
&nbsp;&nbsp; &nbsp;tiny[i].style.left=(tinyx[i]=starx[i])+"px";
&nbsp;&nbsp; &nbsp;tiny[i].style.width="2px";
&nbsp;&nbsp; &nbsp;tiny[i].style.height="2px";
&nbsp;&nbsp; &nbsp;star[i].style.visibility="hidden";
&nbsp;&nbsp; &nbsp;tiny[i].style.visibility="visible"
&nbsp;&nbsp;}
}


function update_tiny(i) {
&nbsp;&nbsp;if (--tinyv[i]==25) {
&nbsp;&nbsp; &nbsp;tiny[i].style.width="1px";
&nbsp;&nbsp; &nbsp;tiny[i].style.height="1px";
&nbsp;&nbsp;}
&nbsp;&nbsp;if (tinyv[i]) {
&nbsp;&nbsp; &nbsp;tinyy[i]+=1+Math.random()*3;
&nbsp;&nbsp; &nbsp;if (tinyy[i]&lt;shigh+sdown) {
&nbsp;&nbsp; &nbsp; &nbsp;tiny[i].style.top=tinyy[i]+"px";
&nbsp;&nbsp; &nbsp; &nbsp;tinyx[i]+=(i%5-2)/5;
&nbsp;&nbsp; &nbsp; &nbsp;tiny[i].style.left=tinyx[i]+"px";
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;else {
&nbsp;&nbsp; &nbsp; &nbsp;tiny[i].style.visibility="hidden";
&nbsp;&nbsp; &nbsp; &nbsp;tinyv[i]=0;
&nbsp;&nbsp; &nbsp; &nbsp;return;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;else tiny[i].style.visibility="hidden";
}


document.onmousemove=mouse;
function mouse(e) {
&nbsp;&nbsp;set_scroll();
&nbsp;&nbsp;y=(e)?e.pageY:event.y+sdown;
&nbsp;&nbsp;x=(e)?e.pageX:event.x+sleft;
}


function set_scroll() {
&nbsp;&nbsp;if (typeof(self.pageYOffset)=="number") {
&nbsp;&nbsp; &nbsp;sdown=self.pageYOffset;
&nbsp;&nbsp; &nbsp;sleft=self.pageXOffset;
&nbsp;&nbsp;}
&nbsp;&nbsp;else if (document.body.scrollTop || document.body.scrollLeft) {
&nbsp;&nbsp; &nbsp;sdown=document.body.scrollTop;
&nbsp;&nbsp; &nbsp;sleft=document.body.scrollLeft;
&nbsp;&nbsp;}
&nbsp;&nbsp;else if (document.documentElement &amp;&amp; (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
&nbsp;&nbsp; &nbsp;sleft=document.documentElement.scrollLeft;
 sdown=document.documentElement.scrollTop;
&nbsp;&nbsp;}
&nbsp;&nbsp;else {
&nbsp;&nbsp; &nbsp;sdown=0;
sleft=0;
&nbsp;&nbsp;}
}


window.onresize=set_width;
function set_width() {
&nbsp;&nbsp;if (typeof(self.innerWidth)=="number") {
&nbsp;&nbsp; &nbsp;swide=self.innerWidth;
&nbsp;&nbsp; &nbsp;shigh=self.innerHeight;
&nbsp;&nbsp;}
&nbsp;&nbsp;else if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
&nbsp;&nbsp; &nbsp;swide=document.documentElement.clientWidth;
&nbsp;&nbsp; &nbsp;shigh=document.documentElement.clientHeight;
&nbsp;&nbsp;}
&nbsp;&nbsp;else if (document.body.clientWidth) {
&nbsp;&nbsp; &nbsp;swide=document.body.clientWidth;
&nbsp;&nbsp; &nbsp;shigh=document.body.clientHeight;
&nbsp;&nbsp;}
}






function createDiv(height, width) {
&nbsp;&nbsp;var div=document.createElement("div");
&nbsp;&nbsp;div.style.position="absolute";
&nbsp;&nbsp;div.style.height=height+"px";
&nbsp;&nbsp;div.style.width=width+"px";
&nbsp;&nbsp;div.style.overflow="hidden";
&nbsp;&nbsp;div.style.backgroundColor=colour;
&nbsp;&nbsp;return (div);
}




function createDiv3(height, width) {
&nbsp;&nbsp;var div=document.createElement("div");
&nbsp;&nbsp;div.style.position="absolute";
&nbsp;&nbsp;div.style.height=height+"px";
&nbsp;&nbsp;div.style.width=width+"px";
&nbsp;&nbsp;div.style.overflow="hidden";
&nbsp;&nbsp;div.style.backgroundColor=colour3;
&nbsp;&nbsp;return (div);
}
// ]]&gt;
&lt;/script&gt;





2º Passo)&nbsp;Mudar as cores das estrelinhas. No começo do código tem duas partes destacadas, uma em verde e a outra em vermelho. Substitua o código que esta em vermelho (&nbsp;#FF0000&nbsp;) pelo código da PRIMEIRA cor que a estrelinha vai ter. E o código em verde (&nbsp;#00FF00&nbsp;) pelo código da SEGUNDA cor da estrelinha. Veja os códigos das cores nesse site&nbsp;http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm&nbsp;.

&nbsp;NOTA : CUIDADO AO MUDAR O CÓDIGO.

3º Passo)&nbsp;Copiar o código que você modificou.

4º Passo)&nbsp;Vá no Tumblr &gt;&gt; Customize &gt;&gt; Theme &gt;&gt; Custom HTML

5º Passo)&nbsp;Procure por&nbsp;&lt;/html&gt;&nbsp;e cole o código imediatamente acima disso.

&nbsp;(Aperte CTRL + F para achar o &lt;/html&gt; mais facilmente.)

6º Passo)&nbsp;Aperte Update Preview para ver se deu tudo certo e se você gostou