quinta-feira, 16 de fevereiro de 2012

Tumblr - Mouse com cauda de cometa


Um efeito bem divertido que se pode colocar no cursor do mouse quando uma pessoa o acessa, é fazer com que uma cauda de cometa o siga (acesse este link e mova o mouse quando a página terminar de carregar). Neste tutorial, vou ensinar de uma maneira bem simples e pratica como colocar esta cauda de cometa no cursor quando alguém acessa seu Tumblr =)

Primeiramente, recomendo que salve o código do seu theme antes de modificá-lo, caso não goste do resultado ou dê algum erro na hora de salvar e você possa voltar como era anteriormente.

Depois disso, procure por </head> no código do seu theme, e cole isso antes dele:
<script language="javascript" src="http://tumbletricks.webs.com/cometa.js"></script>

Pronto ! Agora basta salvar, e o mouse do seu leitor terá uma cauda de cometa seguindo-o =)

Tumblr - Como exclui um tumblr ?

Antes de tudo, não da para excluir um blog somente do tumblr, ou você exclui a sua conta, com todos os seus blogs, ou não exclui nada. Para excluir a sua conta você tem que entrar nesse site 
http://www.tumblr.com/account/delete , confirmar a sua senha e pronto deletar a sua conta.


Ah vale lembrar que deletando a conta, você não terá mais acesso aos posts que você gostou e nem aos seus seguidores. Então é bom pensar muito antes de excluir a sua conta.


Uma opção para quem não quer perder a conta é apagar todos os posts do blog e ou começar outro ou então usar o tumblr apenas para acompanhar as pessoas que você segue.

Tumblr - Como saber quantas pessoas estão online no seu tumblr

Para saber quantas pessoas estão online naquele exato momento no seu tumblr e de que cidade e país elas são. Basta você entrar nesse site http://whos.amung.us/ e copiar o código HTML

Ai você vai no tumblr >>Customize >> Themes >> Custom HTML, e procura com CTRL F </body> e cola o código que você copiou imediatamente acima do</body>. Aperta Update Preview e vê se aparece um botão igual a esse. Se aparecer é só Salvar e sair.


Para ver de que cidade são as pessoas que visitaram o seu tumblr é só você copiar a parte destacada da figura do seu código                                                               

Depois cola esse pedaço do código depois desse link http://whos.amung.us/stats/ , para servir de exemplo http://whos.amung.us/stats/t24c1ghab5tp

Feito isso é só acessar o link que se formou e descobrir a cidade dos seus visitantes, quantas pessoas estão online no seu site e qual foi o numero máximo e mínimo de pessoas online no seu site nas ultimas 24 Horas.

Tumblr - Como mudar a cor das letras

No tutorial abaixo vou ensinar como mudar a cor das letras na sua descrição. Vou explicar de dois modos, o primeiro é para mudar a cor do texto inteiro já o segundo é para mudar a cor de algumas partes do texto.


A)Mudar a cor do texto inteiro


1º Passo) Copie o código abaixo


<font color=#FF0000>texto </font>


2º Passo) Substitua a parte em azul pelo texto inteiro da sua descrição


3º Passo) Vá no site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e escolha uma cor


4º Passo) Copie o código HTML da cor que você escolheu


5º Passo) Substitua a parte em vermelho do código pelo código que você copiou no passo 4.


6º Passo) Abra o Tumblr >> Customize >> Info >> e cola o seu código editado na sua descrição


B) Mudar a cor de apenas uma parte do texto


1º Passo) Escreva o seu texto inteiro


2º Passo) as partes que você quiser substituir você vai ter que trocar pelo código abaixo:


<font color=#FF0000>texto </font>


Exemplo:


O meu texto é :


"Descomplicando o Tumblr. Dicas, Truques e tutoriais para a utilização e customização do seu tumblr."


E eu quero que as palavras tumblr fiquem destacadas em vermelho, então vou ter que fazer o seguinte:


Substituir as palavras tumblr por 


<font color=#FF0000>texto </font>

onde na parte em azul eu vou colocar a palavra que eu quero que mude de cor, no caso aqui Tumblr. E a parte em vermelho é a cor que eu quero, para escolher a cor vá no site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm copie o código HTML dela e substitua pela parte em vermelho do código.

Feito isso o seu texto tem que ficar parecido com esse

"Descomplicando o <font color=#FF0000>Tumblr </font>. Dicas, Truques e tutoriais para a utilização e customização do seu <font color=#FF0000>tumblr </font>."


Repare que eu só substitui a palavra tumblr pelo código portanto só ela irá mudar de cor.


3º Passo) Vá no Tumblr >> Customize >> Info >> E cole o seu texto modificado com o código na sua descrição.


Depois de colar na descrição o texto devera aparecer na sua página inicial da seguinte forma 


"Descomplicando o Tumblr. Dicas, Truques e tutoriais para a utilização e customização do seu tumblr."


Se aparecer alguma parte do código junto com o seu texto é que você fez alguma coisa errada, apague tudo e comece de novo.

Tumblr - Como colocar favicon no tumblr

Favicon é aquele icone/imagem que aparece na barra do seu navegador ao lado do endereço do site, na aba da página ou na sua lista de favoritos.Hoje vamos ensinar como mudar o favicon do seu tumblr.

O tumblr usa como favicon do seu blog a imagem que você colocou na sua info, mas se você quiser que o seu favicon seja diferente basta seguir os passos abaixo.
1º Passo) Entre no site http://www.favicon.co.uk/ , escolha a figura do seu favicon, no tamanho escolha 16x16 e aperte Generate Favicon , irá aparecer uma página igual a imagem abaixo


A parte circulada em azul é como ficou o seu favicon, se você gostou dele aperte "Download Your Favicon Here", que está indicado pela seta vermelha. Com isso você fará o download do favicon, o nome do arquivo será favicon.ico

2º Passo) Agora entre no site http://www.tumblr.com/themes/upload_static_file , escolha o arquivo favicon.ico que você tinha feito o download no passo anterior e aperte "Upload File"


3º Passo) Depois de Apertar "Upload File" irá aparecer um link embaixo na mesma página copie o link, e cole em algum lugar, você irá precisar dele no próximo passo


4º Passo) Copie o código abaixo e substitua a parte em vermelho pelo link do passo anterior

<link rel="shortcut icon" href="Link_Que_Voce_Copiou_do_passo_anterior" />

Exemplo de como deve ficar:

<link rel="shortcut icon" href="http://static.tumblr.com/34hjnix/vVZlgq58p/favicon__1_.ico" />

5º Passo) Entre no tumblr >> Customize >> Theme >> Use Custom HTML .

Recomendamos que copie todo o seu código e salve em algum lugar, para caso de alguma coisa errada, você possa consertar qualquer erro.

Agora procure por <head> e cole o código que você editou no passo anterior imediatamente abaixo do <head>

Exemplo de como deve ficar

<head>
<link rel="shortcut icon" href="http://static.tumblr.com/34hjnix/vVZlgq58p/favicon__1_.ico" />

Aperte Update Preview para ver se o seu tumblr continua do mesmo jeito, essa mudança só da para ver depois que salva, então se o seu tumblr continua do jeito que estava antes da mudança salve e espere carregar a página. Abra a página do seu tumblr ( www.nome.tumblr.com) e veja se o favicon apareceu.

Tumblr - Como colocar MSN no tumblr

Adicione uma janela, um botão ou um ícone do msn no tumblr.
1º Passo) Entre nesse site e faça o login.

2º Passo) Marque a caixinha que está escrito "Permitir que qualquer pessoa na Web veja a minha presença e 
me envie mensagens." Depois clique em salvar.




3º Passo) Clique em Criar HTML no lado esquerdo da página.


4º Passo) Escolha o que você quer adicionar, se é uma janela, um botão ou um ícone.

5º Passo) Copie o código que esta no final da página e cole na sua descrição.

Tumblr - Efeito de neve caindo no tumblr

Aprenda a fazer nevar no seu tumblr...(Entre na página do post e espere ela carregar para ver o efeito)



1º Passo) Copiar o código abaixo



<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#639"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts


var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh;
window.onload=function() { if (document.getElementById) {
  var b, s;
  b=document.createElement("div");
  s=b.style;
  s.position="absolute";
  b.setAttribute("id", "bod");
  document.body.appendChild(b);
  set_scroll();
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    b.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}


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


window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  swide-=3;
  if (slush) {
    if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) {
      slss[i]=createDiv(3, 3);
      slss[i].style.left=3*i+"px";
      document.getElementById("bod").appendChild(slss[i]);
      slsh[i]=3;
    }
    for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"px";
  }
}


window.onscroll=set_scroll;
function set_scroll() {
  var sleft, sdown;
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
  var s=document.getElementById("bod").style;
  s.top=sdown+"px";
  s.left=sleft+"px";
}


function let_it_snow(c) {
  var i, x, o=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
x=flkx[i]/3;
    if (slush) o+=slsh[x];
    if (flky[i]>=shigh-(slush?slsh[x]:0)) {
  if (slush) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
      }
  flky[i]=0;
  fldy[i]=2+Math.floor(Math.random()*4);
  flkx[i]=3*Math.floor(Math.random()*swide/3);
  flks[i].style.left=flkx[i]+"px";
}
flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) {
    for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--;
    set_width();
  }
}
// ]]>
</script>


2º Passo) Editar o código. MUITO CUIDADO AO ALTERAR O CÓDIGO

Altere o número em :


vermelho    de  var speed=33; . Quanto menor o número maior será a velocidade.

roxo            de var flakes=100Esse número representa a quantidade de flocos de neve.

laranja        de var slush=20Esse número representa a quantidade de neve que ficará "acumulada" na parte de baixo da tela, coloque 0 caso não queira que a neve se acumule.

Para alterar a cor dos flocos de neve basta mudar o código em azul de var colour="#639", pelo código HTML da cor que você quer. Visite esse site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm para ver os códigos das cores.

3º Passo) Copiar o código editado e ir no Tumblr >> Customize >> Theme >> Custom HTML >> cole o código imediatamente antes de </body> ( Use CTRL F para achar mais facilmente).