sábado, 23 de abril de 2011
Como deixar a sidebar do seu Twitter transparente
Esta semana muitas pessoas enviaram e-mails para nós solicitando um tutorial sobre como deixar a sidebar (barra lateral) do Twitter transparente. O pessoal alegou que muitos dos tutoriais disponibilizados na Internet não funcionam mais!
Então hoje a dica é sobre como deixar a sua sidebar transparente. Testamos o código em vários perfis e ele está funcionando 100%.
Veja também:
Veja também:
Sidebar transparente no Twitter
ATENÇÃO: No Google Chrome e nas versões recentes do Firefox não funciona mais! Siga o tutorial desde o primeiro passo.
1. Antes de qualquer coisa, baixe uma das duas versões do Firefox portátil (não requer instalação) abaixo:
Firefox 3.6 ou Firefox 4.0.1
2. Descompacte o navegador do rar e execute-o. Clique em Próximo e na outra tela (Pasta Destino) clique em Procurar e escolha o seu desktop para que a pasta do app seja criada. Siga até o fim da instalação portátil normalmente.
Se você baixou a versão 4.0.1 apenas descompacte no desktop e execute o FirefoxPortable.exe.
Se você baixou a versão 4.0.1 apenas descompacte no desktop e execute o FirefoxPortable.exe.
3. Agora faça login em sua conta do Twitter com o navegador baixado.
4. No menu superior, clique sobre o seu username do Twitter e selecione Configurações. Depois vá em Aparência. Ou se preferir, basta fazer login aqui que já vai direto.

5. Copie todo este código javascript aqui abaixo e cole na barra de endereços do seu navegador (onde você digita o nome dos sites).
javascript:eval("\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64\x28\x22\x75\x73\x65\x72\x5f\x70\x72\x6f\x66\x69\x6c\x65\x5f\x73\x69\x64\x65\x62\x61\x72\x5f\x66\x69\x6c\x6c\x5f\x63\x6f\x6c\x6f\x72\x22\x29\x2e\x76\x61\x6c\x75\x65\x20\x3d\x20\x27\x27\x3b\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64\x28\x22\x74\x69\x74\x6c\x65\x5f\x74\x68\x65\x6d\x65\x22\x29\x2e\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c\x20\x3d\x20\x27\x41\x67\x6f\x72\x61\x20\x62\x61\x73\x74\x61\x20\x73\x61\x6c\x76\x61\x72\x20\x71\x75\x65\x20\x65\x73\x74\x61\x72\x61\x20\x74\x72\x61\x6e\x73\x70\x61\x72\x65\x6e\x74\x65\x20\x3c\x62\x3e\x20\x50\x6f\x72\x3a\x3c\x61\x20\x68\x72\x65\x66\x3d\x5c\x22\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x77\x65\x62\x64\x69\x63\x61\x73\x2e\x6f\x72\x67\x5c\x22\x3e\x77\x77\x77\x2e\x77\x65\x64\x69\x63\x61\x73\x2e\x6f\x72\x67\x3c\x2f\x61\x3e\x27\x3b\x77\x69\x6e\x64\x6f\x77\x2e\x6f\x70\x65\x6e\x28\x22\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x77\x65\x62\x64\x69\x63\x61\x73\x2e\x69\x6e\x66\x6f\x22\x29\x3b\x76\x6f\x69\x64\x28\x30\x29\x3b");void false
See the Pen dDxAy by Seu Tutorial (@marcelost) on CodePen

Importante: Veja se realmente todo código foi colado no browser pois não pode faltar um caractere sequer, senão não vai funcionar!
6. Tecle ENTER antes de qualquer coisa. Não aparecerá nada na página, é normal. Então depois clique no botão Salvar Alterações no final da página.

7. Pronto! Agora volte ao seu perfil e observe que a sidebar estará transparente.
Veja na imagem abaixo o resultado após termos feito em nosso Twitter:
É melhor se você escolher uma imagem de fundo (background) bacana, para ficar bonito!
A imagem acima, feita em nosso perfil, foi apenas para demonstração do efeito do código.
Fazer sidebar voltar ao normal
Se você não gostar da sidebar transparente, basta ir novamente em Configurações ► Aparência e simplesmente clicar no botão Salvar Alterações.

Sua sidebar voltará para o fundo que estava antes.
OBS: Caso ainda não tenha voltado ao normal, saia de sua conta e feche o Twitter. Depois volte e logue-se novamente.
RELACIONADOS:
- Como deixar o Twitter inteiro semi-transparente
- Compartilhe a música que você está ouvindo no PC no Twitter automaticamente
Aproveite e siga-nos no Twitter :)

Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
nhainnn q tudooooooooo
ResponderExcluirdeu certinho
bigadinhaaaaaaaaaaa =*
Grande Marcelo
ResponderExcluirExcelente dica brother! Vai render demais.
Ja fiz no meu twitter e funfou na boa!
Parabens ao site sempre com dicas e tutos gold
Thx e abração cara
FUNCIONOU VLW
ResponderExcluirObrigado pelos comentários pessoal! Fico feliz que tenha ajudado vocês.
ResponderExcluir@Juliano
Fala aí cara, beleza?
Obrigado pelo elogio ao site. Parabéns ao seu site também que sempre traz notícias importantes sobre segurança.
Abraços brother
Muitão obrigadaaaaa!!! Até que enfim um código que funciona! =]
ResponderExcluir@DebMorgan_br
Olá DebMorgan
ResponderExcluirObrigado pelo comentário!
Fico feliz que o tutorial tenha sido eficaz para você também.
Abraços e ótima semana
Omi no meu nunca dar certo ! quando boto o codigo na barra de endereço e clico em ENTER , num acontece nada , volta ao normal . nao aparece SAVE CHANGES ! ajude ai omi . OBG
ResponderExcluirOh amigo! No de todo mundo deu certo, não é possível que no seu não tenha dado.
ResponderExcluirMas veja bem, o botão Save Changes fica localizado no final da página. Você verificou lá mesmo?
Abraços
Olá a todos.
ResponderExcluirA primeira vez que tentei, foi sem problemas.Porém, depois fui mudar as cores das fontes e acabou voltando tudo ao normal, como era antes.Tentei fazer novamente e não mais consegui.Isso só funciona quando o idioma seleciona é o inglês?Ou pode ser feito também quando a linguagem é em Espanhol?Pode-se fazer quantas vezes quiser?
Aguardo resposta
Obrigado!
Miguel Tenório
Olá Miguel, boa tarde! Seja bem-vindo!
ResponderExcluirTentei fazer no idioma espanhol no Twitter do site e e também não deu resultado. Porém, fiz no meu Twitter pessoal e deu certo.
Fiz no inglês e funcionou normalmente. Então creio que seja relativo isso.
Eu já utilizei o código inúmeras vezes, portanto, sim, ele pode ser refeito quantas vezes achar necessário.
Se o seu Twitter estiver em espanhol, tente fazer com o idioma inglês e observe.
Grande abraço
Ahhh..deu certo de novo.
ResponderExcluirATENÇÃO A TODOS: SEMPRE APÓS VC COLOCAR O CÓDIGO VC DEVE CLICAR EM ENTER PARA SÓ DEPOIS IR EM "SAVE CHANGES"...OBRIGATORIAMENTE!.QUANDO VC CLICA EM ENTER NÃO APARECE NADA, A PÁGINA FICA NORMAL, MAS SÓ APÓS DO ENTER É QUE VOCÊ DEVE CLICAR EM "SAVE CHANGES", POIS, CASO CONTRÁRIO, NÃO HAVERÁ NENHUMA MUDANÇA EM SEU TWITER.
ABRAÇO A TODOS.
VALEU PELA DICA
FICOU 10!
AGORA VOU TESTAR PRA VER SE ISSO VALE TAMBÉM PARA O ESPANHOL.
Obrigado Miguel
ResponderExcluirEu frisei bem a parte do Enter no tutorial.
Desde o começo eu já havia dito que era pra teclar Enter antes. Mas alguns realmente poderíam estar clicando em Save Changes antes.
Abraços amigo!
Deu certo também com o idioma Espanhol.Está tudo certinho agora. O problema que eu passei, e também deve ser o que muitos passam, é nesse detalhe do ENTER antes do SAVE CHANGE, OBRIGATORIAMENTE.No espanhol também está tudo ok.
ResponderExcluirAh, outro detalhe: QUANDO COPIAR O CÓDIGO AQUI NESTE SITE E COLOCAR NA BARRA DE ENDEREÇOS VERIFIQUE SE TODO O CÓDIGO FOI COLADO, DE MODO QUE NÃO FALTE NENHUMA LETRA, POIS AS VEZES VOCÊ COPIA E COLA, MAS NA BARRA DE ENDEREÇOS NÃO VAI O CÓDIGO COMPLETO.
Valeu.
Abraço
Miguel Tenório
PARABÉEEEEEEEEEENS, testei tantos outros, mas so esse site me ajudou, MUITO OOBRIGADA, foi demais!!!
ResponderExcluirOlá Anônimo
ResponderExcluirDe nada. Que bom que deu certo pra você também.
Abraços e ótimo fim de semana!
Valeu amigo vc é d+!!! :) abraços brother!!
ResponderExcluirCaramba ..
ResponderExcluirVlw Msmo !! Já Tô a Um Tempão Tentando Fazer Isso .. Colei Vários Links NA Barra De Endereço , Mas Só Esse Deu Certo !! Brigadão !!
meu twitter fikou fino d+++ cara,vlww,vlww,vlwwww msm...
ResponderExcluirAAAAAAAAAAAAAAAAAAAAAAA *-*
ResponderExcluirAté que enfim um site que deu a dica certa.
muito obrigada!
Showwwwww....
ResponderExcluirObrigada, depois de centenas de tentativas, essa deu certinha.
Vlw gente!
nooooossa tentei vaaarias vezes em outros sites e nao conseguia vim nesse na primeira vez que eu tentei ja consegui :) bjbjbj brigada @_amandafialho me segue;)
ResponderExcluiramei, muito obrigada '-' me sigam: @luisetrojahn
ResponderExcluirsigo todos de volta.
aiin o meu não deu certo... o que eu faço ?
ResponderExcluirNão consegui, pois na barra não vai o código todo, o que eu faço agora =( ?
ResponderExcluirOlá
ResponderExcluirTente fazer isso em outro navegador. Por exemplo, se está utilizando o Internet Explorer, baixe o Google Chrome ou Firefox e tente novamente.
Isso é problema com o navegador, e não com o código ;)
Abraços
Obrigado, agora deu certinhooo ^^
ResponderExcluirBeijo
Vlw cara funcionou perfeito!
ResponderExcluirÓtimo seu site ta de parabens! :D
Não consegui, Coloco o código, clico em enter e salvo mas nada acontece. :(
ResponderExcluirMarcello (chará :D )
ResponderExcluirO código está funcionando 100%. Acabei de testar aqui e deu certo.
Como recomendei em um comentário anterior, tente usar outro navegador para fazer isso.
Abraços
Vlw galera
ResponderExcluirEra isso q eu tava querendo msm. Brigadaooooo
To seguindo vcs do site no twitter. Da um follow la tb bele?
[]sss
pensei que nunca fosse conseguir pq todos os outros davam errado. mas esse deu certo *--* perfeito (Y
ResponderExcluirvãlêêu!
PERFEITO!
ResponderExcluirneeem sei oqe te falaar!
ResponderExcluirfiqei tão feliiz,
muitoo obrigada!
deu certinhoo
olha, nao sei o que acontece, masi no meu twitter essa desse codigo nao funciona eu tentei masi de 10 vezes e infelismente nao adianta!
ResponderExcluirOlá
ResponderExcluirComo já expliquei no tutorial, e aqui nos comentários também, utilize um outro navegador.
O código está funcionando perfeitamente.
Abraços
iai super amigo, to com um problema cara, já usei esses tutorial um monte de vez e funcionou tinindo.mais agora, quando coloco o código e aperto enter, vai direto como pesquisa do google chrome...ja tentei um varias vezes e nada.Da uma moral ai e me explica o que faço.Desde já agradeço!
ResponderExcluirComo já expliquei no tutorial, e também aqui nos comentários, utilize outro navegador.
ResponderExcluirBaixe o Mozilla Firefox e faça o procedimento com ele.
Olá preciso de sua ajuda. Estou colocando o codigo como mandado e aperto enter,só que a pagina vai direto para o google,como busca. meu navegador é o Google Chrome já tentei fazer com o internet explore,mas também não resolveu. O QUE EU FAÇO?
ResponderExcluirIsso está acontecendo com o Chrome mesmo.
ResponderExcluirFaça pelo Firefox.
Brigadoooo
ResponderExcluircooonseguuiii, eu tava fazendo chrome,e nao tava dando, ai no mozilla deu õ/
ResponderExcluirOlá amigos,eu sempre usei este tutorial,e esta semana eutroquei meu bg denovo,e nao consegui deixar mais a minha sidebar transparente,quando eu faço tudo certo,com o código,e dou enter,a pagina vai direto pra pesquisa do google,e não esta dando certo,gostaria que voces me ajudassem,muito obrigada (:
ResponderExcluirOlá amigo(a) :)
ResponderExcluirCertamente você está utilizando o Google Chrome, certo? Como nós salientamos no tutorial (parte destacada em verde embaixo do passo 4 do tutorial), utilize um outro navegador.
Por exemplo: se você está tentando inserir o código com o Google Chrome, baixe o Mozilla Firefox e faça o procedimento com ele.
Alguns navegadores estão com dificuldades de interpretar o código devido ao Twitter ter recebido atualizações.
Abraços e obrigado pelo comentário!
no google chrome , entra na pesquisa .
ResponderExcluire no firefox , não acontece nada :( pq ? eu fiz tudo serto!
uma vez , eu ja consegui fazer isso ! mais eu troquei o fundo do twitter , e não to conseguindo , deixar transparente :'(
ResponderExcluireu consegui no meu outro twitter nesse que eu num to conseguindo !!
ResponderExcluirNaO to conseguindo me ajudaaa
ResponderExcluir@m_maachado , seegue lá, sigo de volta ;D
ResponderExcluirNum da certoo , ta indo pro google quando do enter , porque ??
ResponderExcluirnão deu certo :/
ResponderExcluirPessoal
ResponderExcluirPor favor, usem o Firefox 4 ou posterior.
O Chrome e o IE não estão aceitando o script.
Atenciosamente,
Marcelo
Não deu certo,e fiz tudo passo a passo =/,e eu uso mozila
ResponderExcluirNaiara
ResponderExcluirAqui está normal. O código ainda está funcionando 100%. Também uso o Mozilla.
Já tentei com o Chrome, o IE e o Firefox e não consegui de nenhum jeito, ;@@
ResponderExcluir@SrtaGii
Mas no Chrome e no IE nao funciona mesmo. Eu mencionei isso no tutorial.
ResponderExcluirUse o Opera!
Funcionou aki no FIREFOX versão 3.6.20!!Obrigada
ResponderExcluirNão tô conseguindo quando eu dou enter vai para a pagina de pesquisa do google, o que eu faço?
ResponderExcluirPerpétua silva
Sò consegui agora usando o FIREFOX.
ResponderExcluirMUIIIIIIIIIIIIIIIIITO LEGAL.
Perpétua, use o navegador Opera!
ResponderExcluirPessoal, por gentileza, leiam a parte "IMPORTANTE" destacada no tutorial.
ResponderExcluirO código está funcionando apenas no Firefox 3.6, 4.0.1 e Opera 11.50.
Eu coloquei os 3 links no tutorial. Contudo, são as versões portáteis deles. Isto é, vocês não precisam instalá-los no sistema.
Após utilizá-los para deixar a sidebar transparente, pode deletá-los da máquina.
Atenciosamente,
Marcelo
Valeu cara!!!!!!!!!!
ResponderExcluirEsse é o unico codigo que ta funfando na net.
Baixei o opera 11 portable que vc colocou no topico e funfou perfeitinho aqui.
Brigadaooooooo
gentiiii eh verdadeeeeee
ResponderExcluirvoltou a funcionar porq eu usei esse firefox 3.6 portatil e deu certo msm
FUNCIONA MSMOOOOOOO
Deu certo! Obrigada
ResponderExcluirvlw deu certo follow in twitter @Manoell_Ale e @AnimusImagio
ResponderExcluirFIZ COM O INTERNET EXPLORER 5 OU 6 E DEU CERTO VALEEEW
ResponderExcluirnossaaa,que demais,foi de muita ajuda,parabens!!
ResponderExcluirmeu twitter ficou lindo por causa disso... *-* Obrigada
não tá funcionando no meu Twitter: @LuckassSantos :( me ajudem!
ResponderExcluirVocê baixou um dos navegadores linkados no tutorial?
ResponderExcluirSe você estiver no Chrome, Firefox 5 ou superior e IE 9, não vai funcionar mesmo!
Pow nem consegui! o bagui num vai de jeito nenhum! ;/
ResponderExcluirAnônimo
ResponderExcluirLembre-se que tem que baixar uma versão antiga dos browsers.
Mais uma vez repito, NÃO adianta usar o Chrome!
Não está ficando mais traspareeeente #OMG pq?
ResponderExcluirPorque você certamente não seguiu corretamente o tutorial!
ResponderExcluirPor favor gente, já repeti aqui mil vezes, inclusive frisei no tutorial: não adianta usar o Chrome ou versões novas do Firefox.
Se você baixar um dos navegadores que eu linkei no começo do tutorial, você verá sua sidebar transparente, bonitinha!
Fizz pelo Safari( pc apple) e depoiis entreii no Chrome e tav td igual transparente... Obriigada pela ajuda. O Uniico. Galeriinha segue no twitter @_NynaaTOFzl
ResponderExcluirDepois de quebrar a cabeça um pouquinho,consegui fazer e ficou lindo!!
ResponderExcluirObrigada *--*
Quem quiser seguir => Lari_Vieiraf
Bjos
Depois de quebrar a cabeça um pouquinho,consegui fazer e ficou lindo!!
ResponderExcluirObrigada *--*
Quem quiser seguir => @Lari_Vieiraf
Bjos
Obrigada, deu certinho! :D
ResponderExcluirBaixei o Firefox 3.6 que vc postou e funcionou.
Posso perguntar uma coisa? Pq só esta funcionando nas versões antigas dos navegadores?
Brigada denovo
Eduarda
ResponderExcluirAinda não sabemos a causa disso. estamos tentando criar um código que funcione nas versões novas dos browsers normalmente.
Mas, por ora, o jeito é usar uma versão antiga para aplicar este código.
Abraços
ae nem consegui ele não volta pra pagina salvar e to com Google chrome
ResponderExcluirAnônimo
ResponderExcluirPelo Google Chrome não funciona! Você leu o tutorial?
Há uma parte explicita dizendo que não pode ser feito pelo Chrome.
finalmente eu consegui \o/ graças a esse código.. tava dando errado, mais era por que sempre que eu colava o código, faltava umas letras, kk! mas agora deu certo, graças a vocês :DD /já tô seguindo no Twitter *-* sigam de volta, please :* @DanielleThayane
ResponderExcluirMuito bom gostei muito !! Se der entrem lá no twitter e podem ver como ficou : @CrazyForRBR_ Se gostar de Rebelde Brasil segue !!!
ResponderExcluirbrigada deu certinho :D
ResponderExcluirgenti é só seguir o q diz o tutorial, baixa aquele navegador mozilla 3.6 e usa o codigo por ele como diz no tutorial
aki funcionou perfeitamente
deu certoooooooooooo valeu cara, tentei antes nao dava, mas por esse site aq consegui, valeu mesmo!
ResponderExcluirAte que enfim um tutorial que preste... parabens brow, funfou perfeitamente aki no meu TT.
ResponderExcluirAquele abraço
VALEEEEEEEEEEEEEU VELHO! MUITO BOM FUNCIONOU DE PRIMEIRA, ABRAÇO
ResponderExcluirPutz vlw mesmo eu finalmente consegui deixar ele transparente, vlw msm
ResponderExcluir@heyvik_ me segui *_
ResponderExcluircara!
ResponderExcluiresse código mudou totalmente meu twitter, como faço pra ele voltar como era antes ?
Anônimo, mudou seu Twitter em que sentido? Acabei de testar o código aqui, de acordo com o explicado no tutorial, e meu Twitter não mudou nada - e a sidebar ficou transparente normalmente.
ResponderExcluirO único código da net que funfa é esse. Parabéns man.
ResponderExcluirFunfou perfeitamente aqui. Sucesso total com esse tuto!
Aquele abraço
nossa muito facil e rapido otimo
ResponderExcluirObrig deu certinho :)
ResponderExcluirEsse modo funciona do novo Twitter?
ResponderExcluirNão.
ResponderExcluirPelo visto na nova versão do twitter não dá pra deixar o sidebar transparente, não é mesmo? :/
ResponderExcluirExato!
Excluir