Box ask me anything
Bom, eu já expliquei aqui no blog como habilitar a função Ask me Anything no seu tumblr, agora eu vou ensinar como colocar um box na barra lateral do seu tumblr semelhante a esse da imagem
1º Passo) Entre no site do seu tumblr da seguinte maneira. NOME_DO_SEU_BLOG.tumblr.com/ask se a página for encontrada quer dizer que você já tem a função ask me ativada para a sua conta. Caso a página não for encontrada leia o post que eu fiz explicando como habilitar essa função aqui.
2º Passo) Copie o código abaixo e cole no bloco de notas
<h2><a href="">Ask me anything</a></h2>
<p><iframe frameborder="0" scrolling="no" width="100%" height="149" src="http://www.tumblr.com/ask_form/Nome_do_seu_blog.TUMBLR.COM"
></iframe>
<!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
3º Passo) Substituir a parte destacada em azul pelo que você quer que apareça no lugar do “Ask me anything”
4º Passo) Substituir a parte destacada em vermelho pelo endereço do seu tumblr.
5º Passo) Entrar no Tumblr » Customize » Info » Cole o código que você alterou na sua descrição, aperte Theme e espere carregar se aparecer um box semelhante ao da imagem do inicio do post e você gostar dele salve e saia, se não aparecer esse box, ou você fez alguma coisa errada com o código ou você ainda não tem a função “Ask me” habilitada.
Relógio no tumblr
º Passo) Entrar no site http://www.clocklink.com/gallery.php , existem alguns outros sites, mas esse é um dos mais simples de mexer
2º Passo) Escolher o relógio da sua preferência
A parte indicada na figura por:
A) É para os relógios analógicos e digitais, dentro do box vermelho estão todas as categorias de relógios. Clique em uma das categorias para ver os relógios disponíveis.
B) É para o relógio do mapa Mundi, clique em World Clock
3º Passo) Depois de escolher o relógio que você quer aperte View HTML Tag, que fica embaixo dos relógios.
4º Passo) Vai abrir uma nova página semelhante a da imagem abaixo
A) É o modelo do relógio que você escolheu, para quem esta fazendo o do mapa mundi aparece a mesma coisa.
B) Escolher a cor do relógio
C) Aqui é para escolher o fuso do relógio. Aperte Select by City, depois escolha o país e a cidade. No caso do Mapa Mundi é só clicar na região do planeta em que você se encontra, ou então colocar no Timezone a opção : BRST: Brazilian Time (GMT - 02:00)
D) Escolher o tamanho do relógio, o tamanho vária de acordo com o relógio escolhido. Mas da para você mudar manualmente o tamanho.
E) Copie esse código.
5º Passo) Vá no Tumblr » Customize » Info e cole o código na sua descrição.
Caso você queira mudar o tamanho do seu relógio, você vai ter que mudar uma coisinha simples no código.
Primeiro você deve procurar por width ( largura) e mudar o número que está do lado. Depois procure por height ( altura) e também mude o número que está ao seu lado. Vou usar o código abaixo como exemplo, o relógio em questão é um mapa mundi azul
<script src=”http://www.clocklink.com/embed.js”></script><script type=”text/javascript” language=”JavaScript”>obj=new Object;obj.clockfile=”world001-blue.swf”;obj.TimeZone=”BRST”;obj.width=480;obj.height=250;obj.wmode=”transparent”;showClock(obj);</script>
As partes em azul são as palavras que citei anteriormente, as partes em vermelho são os números que devem ser mudados, esses números são as medidas. Eu aconselho 200x150 ou então 150x100, mas é você quem decide o tamanho. Ah e isso depende também do tamanho da sua sidebar. Aconselho ir mudando as medidas até chegar no tamanho ideal
Mas muito cuidado ao mudar o código, não altere mais nada além dos números, se não o código pode não funcionar.
Letras seguindo o mouse
Bom, hoje eu vou ensinar como colocar letras, palavras ou frases seguindo o cursor do mouse. É bem simples basta seguir os passos abaixo.
1º Passo) Copiar o código abaixo e colar no bloco de notas
<script language=”javascript”>
//Alterar o Texto que stá dentro das Aspas em baixo:
var text=’ESCREVA AQUI O SEU TEXTO’;
var delay=40; // altere aqui velocidade
var Xoff=20; // distancia a contar para a direita do cursor (- Valores em negativo vão para a esquerda)
var Yoff=0; //distancia a contar para baixo desde o cursor (- Valores em negativo vão para cima)
var txtw=14; // Espaço que cada caracter ocupa
var beghtml=’<font color=”#ba476b“><b>’;
var endhtml=’</b></font>’;
//********** Não alterar o código seguinte **********\
ns4 = (navigator.appName.indexOf(“Netscape”)>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf(“Netscape”)>=0 )? true: false;
var txtA=new Array();
text=text.split(”);
var x1=0;
var y1=-1000;
var t=”;
for(i=1;i<=text.length;i++){
t+=(ns4)? ‘<layer left=”0” top=”-100” width=”’+txtw+’” name=”txt’+i+’” height=”1”>’ : ‘<div id=”txt’+i+’” style=”position:absolute; top:-100px; left:0px; height:1px; width:’+txtw+’; visibility:visible;”>’;
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? ‘</layer>’ : ‘</div>’;
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+’px’;
id.style.top=y+’px’;
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers[‘txt’+i]:(ie4)?document.all[‘txt’+i]:document.getElementById(‘txt’+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval(‘movetxts()’,delay);
}
</script>
2º Passo) Substitua a parte destacada em azul pelas palavras que você quer que sigam o seu cursor.
3º Passo) Entre nesse site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e escolha de que cor vão ser as palavras. Copie o código HTML dessa cor.
4º Passo) Substitua a parte destacada em vermelho pelo código da cor que você escolheu no passo anterior.
5º Passo) Entre no tumblr » Customize » Theme » Custom HTML » aperte Ctrl F e procure por <body> cole o código que você editou imediatamente abaixo do <body>, aperte Update Preview e veja se apareceu o que você queria ao lado do mouse, se sim salve e sai se não cancela e tenta fazer de novo.
Bolhas saindo do mouse
No tutorial de hoje vou ensinar a colocar bolhas saindo do seu mouse, parecidas com essas que estão saindo do seu cursor, aqui no blog. Se você não está vendo clique em Continue Lendo aqui em baixo, para você ir para a página do post e ver como é o efeito.
1º Passo) Copiar o código abaixo e colar em algum editor de texto que você tenho no seu computador.(Bloco de notas ou Word)
<script type=”text/javascript”>
// <![CDATA[
var colours=new Array(“#a6f”, “#60f”, “#60f”, “#a6f”, “#ccc”); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv(“3px”, “3px”);
rats.style.visibility=”hidden”;
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.top=”1px”;
div.left=”0px”;
div.bottom=”1px”;
div.right=”0px”;
div.borderLeft=”1px solid “+colours[3];
div.borderRight=”1px solid “+colours[1];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.top=”0px”;
div.left=”1px”;
div.right=”1px”;
div.bottom=”0px”
div.borderTop=”1px solid “+colours[0];
div.borderBottom=”1px solid “+colours[2];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.left=”1px”;
div.right=”1px”;
div.bottom=”1px”;
div.top=”1px”;
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter=”alpha(opacity=50)”;
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+”px”;
bubb[c].top=(bubby[c]=y)+”px”;
bubb[c].width=”3px”;
bubb[c].height=”3px”
bubb[c].visibility=”visible”;
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout(“bubble()”, 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+”px”;
bubb[i].height=bubbs[i]+”px”;
}
bubb[i].top=bubby[i]+”px”;
bubb[i].left=bubbx[i]+”px”;
}
else {
bubb[i].visibility=”hidden”;
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
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;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
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;
}
}
function createDiv(height, width) {
var div=document.createElement(“div”);
div.style.position=”absolute”;
div.style.height=height;
div.style.width=width;
div.style.overflow=”hidden”;
return (div);
}
// ]]>
</script>
2º Passo) Escolher as cores das bolhas. No começo do código tem uma parte que está destacada com várias cores. Vou repetir essa linha do código aqui para poder explicar como muda as cores.
var colours=new Array(“#a6f”, “#60f”, “#60f”, “#a6f”, “#ccc”);
A parte em :
Vermelho: Cor da parte de cima da bolha
Laranja : Cor do lado direito da bolha
Azul : Cor da parte de baixo da bolha
Roxo : Cor do lado esquerdo da bolha
Preto : Cor do fundo da bolha
OBS: Muito cuidado antes de alterar o código.
Para alterar as cores entre nesse site http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e copie o código HTML da cor e substitua no lugar de qualquer uma das cores do código.
3º Passo) Agora vamos escolher quantas bolhas no máximo vai ter na página. Vou copiar outra parte do código aqui só pra exemplificar. Essa parte esta no começo do código também, junto com a parte das cores.
var bubbles=66
Aqui é só ir mudando o valor e ver qual quantidade de bolhas você prefere.
4º Passo) Agora é só copiar o código que você editou e ir no Tumblr » Customize » Themes » Use Custom HTML » Agora procure no código por </body>, use CTLR F para procurar. Agora cole o código que você modificou imediatamente antes do </body>. Aperte Update Preview e espere a página carregar, passe o mouse pela sua página que está ao fundo veja se as bolhas estão saindo do mouse e se você gostou do resultado, se sim salve e saia se não gostou aperte Cancel.
5º Passo) Deixe nos comentários o seu tumblr, pro pessoal ver como é que fica o resultado :D
Twitter
Alguns leitores do blog pediram para a gente explicar como colocar aquele ‘botão’ do twitter que fica ali no canto da página, é isso que vamos explicar hoje, é bem simples.
1º Passo) Entre nesse site http://www.go2web20.net/twitterfollowbadge
2º Passo) Configurar o seu botão
A) Nome da sua conta no twitter, no caso aqui do blog dicastumblr
B)O que você quer que apareça escrito
C) A cor
D) O lado que o botão irá aparecer
E) Mudar o Tamanho
3º Passo) Aperte Update Code, com isso irá aparecer um código, copie esse código
4º Passo) Entre no Tumblr » Customize » Info » cole esse código na sua descrição
Como personalizar a dashboard do tumblr
Algumas pessoas andaram perguntando aqui no blog e no formspring como personalizar a dashboard do tumblr. Para quem não sabe o que seria mudar a dashboard vou colocar duas imagens aqui embaixo como exemplo. Clique nelas para aumentar
Somente os usuários do Firefox e do Google Chrome conseguem fazer essa modificação.
1º Passo) Instale o Stylist,
Firefox : https://addons.mozilla.org/en-US/firefox/addon/stylish/
Chrome: https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
2º Passo) Feche o seu navegador e abra novamente.
3º Passo) Entre nesse site http://userstyles.org/styles/browse/tumblr.com e procure por algum tema que você goste, para achar as dashboards relacionadas a ele, ou então vai clicando em uma por uma até achar uma que lhe agrade.
4º Passo) Depois de achar a Dashboard que você quer, clique em Install with Stylist
5º Passo) Abra o tumblr e veja como ficou o resultado.
OBS: No caso do Chrome vai aparecer um S no canto superior direito do navegador, do lado das ferramentas.
Clique nesse S quando estiver na página do tumblr, ele lhe dará a opção de desinstalar a Dashboard (Disable).
Caso tenha instalado mais de uma dashboard é normal elas se misturarem, para resolver esse problema é só clicar no S e desistalar todas as dashboards menos a que você quer usar.
6º Passo) Comente aqui no blog se conseguiu instalar a Dashboard e o que achou do resultado. E se quiser deixe o link do seu tumblr.
NOTA: Para desinstalar no Firefox vá em Ferramentas » Complementos » Vai abrir uma nova janela » aperte em extensões » desinstale o Stylist.
Como fazer perguntas no tumblr ?
Aprenda a fazer perguntas para todos os seus followers de uma só vez.
Bom, é muito simples fazer perguntas, basta você criar um post onde o texto termine com um ponto de interrogação. Com isso irá aparecer um quadradinho do lado direito da página escrito “Let people answer this”, marque-o.
Bloquear o botão direito do mouse com AVISO!
Aprenda como colocar um aviso para o seu visitante quando ele tentar usar o botão direito do mouse.
1º Passo) Copiar o código abaixo
<SCRIPT language=JavaScript><!—function click() {if (event.button==2) {alert(‘COPIAR CONTEÚDO DESSA PÁGINA É PROIBIDO’)alert(‘SE GOSTOU REBLOGUE !!!!’)}}document.onmousedown=click// —></SCRIPT>
2º Passo) Editar o código com a frase que você quer que apareça para os seus visitantes. A parte em vermelho é a primeira mensagem que irá aparecer, a parte em azul é a segunda.
3º Passo) Copiar o código que você editou e colar ele na sua descrição do tumblr.
Abowman no Tumblr - Bichinho Virtual
Abowman é um site que disponibiliza alguns gadgets de jogos simples e alguns jogos com ‘bichinhos virtuais’ que você pode colocar no seu tumblr. Aqui embaixo temos dois exemplos de bichinhos virtuais.
Para jogar o do cachorro, basta você selecionar uma das opção na parte de baixo e bricar com ele.
Já o do hamster você tem que clicar na tela do jogo para dar comida para ele. Para fazer ele correr na roda basta clicar na bolinha amarela do centro
Para colocar alguns desses jogos no seu tumblr, siga as intruções abaixo:
1º Passo) Entre nesse site http://abowman.com/google-modules/ e escolha o jogo.
2º Passo) Aperte edit settings logo abaixo da tela do jogo para mudar as cores.
3º Passo) Embaixo de embed code tem um código copie ele inteiro.( Alguns jogos não tem
4º Passo) Se você quiser que o jogo fique na sua barra lateral vá em Customize » Info e cole o código na descrição. Agora se você quer fazer um post com o jogo, vá em criar post de video e cole o código no primeiro box (Embed Video).
Como colocar musica no tumblr pelo hypster
Mais um modo de colocar músicas e playlist no tumblr.
1º Passo) Entrar no site http://www.hypster.com/ e se registrar.
2º Passo) Depois de se registrar clique em ‘Search’
3º Passo) Procure pelas músicas que você quer, quando achar clique no +ADD que esta do lado do nome da música, faça isso com todas as músicas que você quer no seu player.
4º Passo) Depois de adicionar todas as músicas clique em ‘My Account’
5º Passo) Agora clique na imagem de uma fita, estilo aquelas que se colocava no rádio
6º Passo) Clique na imagem do Classic Player
7º Passo) Agora é a hora de configurar o seu player. Na imagem está explicando o que cada opção faz
8º Passo) Copiar o código que esta em um box azul do lado direito da tela ( o código esta destacado em preto na imagem abaixo)
9º Passo) Editar o código,
MUITA ATENÇÃO NESSA PARTE PARA NÃO MODIFICAR COISA ERRADA
No seu código vai ter uma parte assim
width:370px;visibility:visible; height:300px;” type=”application/x-shockwave-flash” height=”300” width=”370”
Substitua os 370 destacados em azul por 55 e os 300 destacados em vermelho por 15, essa parte do seu código deve ficar assim
width:55px;visibility:visible; height:15px;” type=”application/x-shockwave-flash” height=”15” width=”55”
Atenção: Só essa parte do código que muda, o resto continua igual
10º Passo) Agora copie todo o código vá no Tumblr » Customize » Info » e Cole o código na sua descrição.
