Dicas, truques, tutoriais, reviews, promoções e informação

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:


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.

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.

deixar-sidebar-transparente-no-twitter

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



código-para-deixar-sidebar-transparente-que-esteja-funcionando-2013-2014

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.

barra-lateral-transparente-no-meu-twitter

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:

como-deixo-a-sidebar-do-meu-twitter-transparente

É 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çõesAparência e simplesmente clicar no botão Salvar Alterações.

100%-funcionando-código-javascript-sidebar-transparente-twitter

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:


Aproveite e siga-nos no Twitter :)

96 comentários:

  1. nhainnn q tudooooooooo

    deu certinho

    bigadinhaaaaaaaaaaa =*

    ResponderExcluir
  2. Grande Marcelo
    Excelente 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

    ResponderExcluir
  3. Obrigado pelos comentários pessoal! Fico feliz que tenha ajudado vocês.

    @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

    ResponderExcluir
  4. Muitão obrigadaaaaa!!! Até que enfim um código que funciona! =]

    @DebMorgan_br

    ResponderExcluir
  5. Olá DebMorgan

    Obrigado pelo comentário!
    Fico feliz que o tutorial tenha sido eficaz para você também.

    Abraços e ótima semana

    ResponderExcluir
  6. 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

    ResponderExcluir
  7. Oh amigo! No de todo mundo deu certo, não é possível que no seu não tenha dado.
    Mas veja bem, o botão Save Changes fica localizado no final da página. Você verificou lá mesmo?

    Abraços

    ResponderExcluir
  8. Olá a todos.
    A 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

    ResponderExcluir
  9. Olá Miguel, boa tarde! Seja bem-vindo!
    Tentei 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

    ResponderExcluir
  10. Ahhh..deu certo de novo.
    ATENÇÃ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.

    ResponderExcluir
  11. Obrigado Miguel
    Eu 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!

    ResponderExcluir
  12. 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.
    Ah, 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

    ResponderExcluir
  13. PARABÉEEEEEEEEEENS, testei tantos outros, mas so esse site me ajudou, MUITO OOBRIGADA, foi demais!!!

    ResponderExcluir
  14. Olá Anônimo
    De nada. Que bom que deu certo pra você também.

    Abraços e ótimo fim de semana!

    ResponderExcluir
  15. Valeu amigo vc é d+!!! :) abraços brother!!

    ResponderExcluir
  16. Caramba ..
    Vlw 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 !!

    ResponderExcluir
  17. meu twitter fikou fino d+++ cara,vlww,vlww,vlwwww msm...

    ResponderExcluir
  18. AAAAAAAAAAAAAAAAAAAAAAA *-*
    Até que enfim um site que deu a dica certa.
    muito obrigada!

    ResponderExcluir
  19. Showwwwww....

    Obrigada, depois de centenas de tentativas, essa deu certinha.

    Vlw gente!

    ResponderExcluir
  20. 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;)

    ResponderExcluir
  21. amei, muito obrigada '-' me sigam: @luisetrojahn
    sigo todos de volta.

    ResponderExcluir
  22. aiin o meu não deu certo... o que eu faço ?

    ResponderExcluir
  23. Não consegui, pois na barra não vai o código todo, o que eu faço agora =( ?

    ResponderExcluir
  24. Olá
    Tente 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

    ResponderExcluir
  25. Obrigado, agora deu certinhooo ^^
    Beijo

    ResponderExcluir
  26. Vlw cara funcionou perfeito!

    Ótimo seu site ta de parabens! :D

    ResponderExcluir
  27. Não consegui, Coloco o código, clico em enter e salvo mas nada acontece. :(

    ResponderExcluir
  28. Marcello (chará :D )
    O 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

    ResponderExcluir
  29. Vlw galera
    Era isso q eu tava querendo msm. Brigadaooooo

    To seguindo vcs do site no twitter. Da um follow la tb bele?

    []sss

    ResponderExcluir
  30. pensei que nunca fosse conseguir pq todos os outros davam errado. mas esse deu certo *--* perfeito (Y
    vãlêêu!

    ResponderExcluir
  31. neeem sei oqe te falaar!
    fiqei tão feliiz,
    muitoo obrigada!
    deu certinhoo

    ResponderExcluir
  32. 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!

    ResponderExcluir
  33. Olá
    Como já expliquei no tutorial, e aqui nos comentários também, utilize um outro navegador.

    O código está funcionando perfeitamente.

    Abraços

    ResponderExcluir
  34. 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!

    ResponderExcluir
  35. Como já expliquei no tutorial, e também aqui nos comentários, utilize outro navegador.

    Baixe o Mozilla Firefox e faça o procedimento com ele.

    ResponderExcluir
  36. 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?

    ResponderExcluir
  37. Isso está acontecendo com o Chrome mesmo.

    Faça pelo Firefox.

    ResponderExcluir
  38. cooonseguuiii, eu tava fazendo chrome,e nao tava dando, ai no mozilla deu õ/

    ResponderExcluir
  39. Olá 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 (:

    ResponderExcluir
  40. Olá amigo(a) :)
    Certamente 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!

    ResponderExcluir
  41. no google chrome , entra na pesquisa .

    e no firefox , não acontece nada :( pq ? eu fiz tudo serto!

    ResponderExcluir
  42. uma vez , eu ja consegui fazer isso ! mais eu troquei o fundo do twitter , e não to conseguindo , deixar transparente :'(

    ResponderExcluir
  43. eu consegui no meu outro twitter nesse que eu num to conseguindo !!

    ResponderExcluir
  44. @m_maachado , seegue lá, sigo de volta ;D

    ResponderExcluir
  45. Num da certoo , ta indo pro google quando do enter , porque ??

    ResponderExcluir
  46. Pessoal

    Por favor, usem o Firefox 4 ou posterior.

    O Chrome e o IE não estão aceitando o script.

    Atenciosamente,
    Marcelo

    ResponderExcluir
  47. Não deu certo,e fiz tudo passo a passo =/,e eu uso mozila

    ResponderExcluir
  48. Naiara
    Aqui está normal. O código ainda está funcionando 100%. Também uso o Mozilla.

    ResponderExcluir
  49. Já tentei com o Chrome, o IE e o Firefox e não consegui de nenhum jeito, ;@@

    @SrtaGii

    ResponderExcluir
  50. Mas no Chrome e no IE nao funciona mesmo. Eu mencionei isso no tutorial.

    Use o Opera!

    ResponderExcluir
  51. Funcionou aki no FIREFOX versão 3.6.20!!Obrigada

    ResponderExcluir
  52. Não tô conseguindo quando eu dou enter vai para a pagina de pesquisa do google, o que eu faço?
    Perpétua silva

    ResponderExcluir
  53. Sò consegui agora usando o FIREFOX.
    MUIIIIIIIIIIIIIIIIITO LEGAL.

    ResponderExcluir
  54. Perpétua, use o navegador Opera!

    ResponderExcluir
  55. Pessoal, por gentileza, leiam a parte "IMPORTANTE" destacada no tutorial.

    O 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

    ResponderExcluir
  56. Valeu cara!!!!!!!!!!

    Esse é o unico codigo que ta funfando na net.
    Baixei o opera 11 portable que vc colocou no topico e funfou perfeitinho aqui.

    Brigadaooooooo

    ResponderExcluir
  57. gentiiii eh verdadeeeeee

    voltou a funcionar porq eu usei esse firefox 3.6 portatil e deu certo msm

    FUNCIONA MSMOOOOOOO

    ResponderExcluir
  58. vlw deu certo follow in twitter @Manoell_Ale e @AnimusImagio

    ResponderExcluir
  59. FIZ COM O INTERNET EXPLORER 5 OU 6 E DEU CERTO VALEEEW

    ResponderExcluir
  60. nossaaa,que demais,foi de muita ajuda,parabens!!
    meu twitter ficou lindo por causa disso... *-* Obrigada

    ResponderExcluir
  61. não tá funcionando no meu Twitter: @LuckassSantos :( me ajudem!

    ResponderExcluir
  62. Você baixou um dos navegadores linkados no tutorial?

    Se você estiver no Chrome, Firefox 5 ou superior e IE 9, não vai funcionar mesmo!

    ResponderExcluir
  63. Pow nem consegui! o bagui num vai de jeito nenhum! ;/

    ResponderExcluir
  64. Anônimo
    Lembre-se que tem que baixar uma versão antiga dos browsers.

    Mais uma vez repito, NÃO adianta usar o Chrome!

    ResponderExcluir
  65. Não está ficando mais traspareeeente #OMG pq?

    ResponderExcluir
  66. Porque você certamente não seguiu corretamente o tutorial!

    Por 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!

    ResponderExcluir
  67. 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

    ResponderExcluir
  68. Depois de quebrar a cabeça um pouquinho,consegui fazer e ficou lindo!!
    Obrigada *--*
    Quem quiser seguir => Lari_Vieiraf
    Bjos

    ResponderExcluir
  69. Depois de quebrar a cabeça um pouquinho,consegui fazer e ficou lindo!!
    Obrigada *--*
    Quem quiser seguir => @Lari_Vieiraf
    Bjos

    ResponderExcluir
  70. Obrigada, deu certinho! :D
    Baixei 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

    ResponderExcluir
  71. Eduarda
    Ainda 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

    ResponderExcluir
  72. ae nem consegui ele não volta pra pagina salvar e to com Google chrome

    ResponderExcluir
  73. Anônimo
    Pelo Google Chrome não funciona! Você leu o tutorial?

    Há uma parte explicita dizendo que não pode ser feito pelo Chrome.

    ResponderExcluir
  74. 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

    ResponderExcluir
  75. Muito bom gostei muito !! Se der entrem lá no twitter e podem ver como ficou : @CrazyForRBR_ Se gostar de Rebelde Brasil segue !!!

    ResponderExcluir
  76. brigada deu certinho :D

    genti é 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

    ResponderExcluir
  77. deu certoooooooooooo valeu cara, tentei antes nao dava, mas por esse site aq consegui, valeu mesmo!

    ResponderExcluir
  78. Ate que enfim um tutorial que preste... parabens brow, funfou perfeitamente aki no meu TT.

    Aquele abraço

    ResponderExcluir
  79. VALEEEEEEEEEEEEEU VELHO! MUITO BOM FUNCIONOU DE PRIMEIRA, ABRAÇO

    ResponderExcluir
  80. Putz vlw mesmo eu finalmente consegui deixar ele transparente, vlw msm

    ResponderExcluir
  81. cara!
    esse código mudou totalmente meu twitter, como faço pra ele voltar como era antes ?

    ResponderExcluir
  82. 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.

    ResponderExcluir
  83. O único código da net que funfa é esse. Parabéns man.
    Funfou perfeitamente aqui. Sucesso total com esse tuto!
    Aquele abraço

    ResponderExcluir
  84. Esse modo funciona do novo Twitter?

    ResponderExcluir
  85. Pelo visto na nova versão do twitter não dá pra deixar o sidebar transparente, não é mesmo? :/

    ResponderExcluir