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

quarta-feira, 7 de setembro de 2011

Como deixar a sidebar do Twitter transparente sem usar códigos



Atualização: Não funciona mais com o novo Twitter

Há algum tempo atrás, postamos aqui no blog um tutorial sobre como deixar a sidebar do Twitter transparente utilizando um código javascript. Vide artigo abaixo:

Código para deixar a sidebar do Twitter transparente

O código ainda funciona perfeitamente - para quem tem dúvidas -, mas deve ser aplicado nas versões antigas dos browsers. Porém, descobri uma nova maneira de fazer isto sem usar absolutamente nenhum código. É simples e rápido!

Portanto, selecione o seu browser abaixo e aprenda como fazer.


CLIQUE AQUI E ASSISTA A VÍDEO AULA DESTE TUTORIAL

OBS: Caso ainda assim não consiga, procure-nos no Twitter.

Sidebar do Twitter Transparente


GOOGLE CHROME

1. Faça login em sua conta do Twitter. Clique no seu username e selecione Configurações.

twitter-sidebar-transparente-sem-codigo

2. Clique na guia Aparência.

como-deixar-o-sidebar-do-twitter-transparente

3. Agora clique com o botão direito do mouse em qualquer área vazia da página (não em cima das imagens e nem dos botões) e selecione a opção Inspecionar elemento.

como-deixar-o-twitter-transparente

4. A janela do aplicativo vai abrir para você. No campo de busca, ao lado direito, procure pelo seguinte componente: user_profile_sidebar_fill_color

sidebar-transparente-novo-twitter

5. Este componente será encontrado e marcado de amarelo no campo dos códigos abaixo. Na mesma linha deste componente acima pesquisado, um pouco pra frente, localize a seguinte tag: value="#DDEEF6" ou algo parecido (no seu o valor pode ser diferente de #DDEEF6, neste caso mexa nele). Veja na imagem abaixo.

sidebar-do-twitter-invisivel-codigo

6. Agora simplesmente clique sobre o valor "#DDEEF6" (ou o valor que estiver no seu) e apague ele. Depois tecle Enter e feche a janelinha.

extensão-que-deixa-sidebar-transparente

7. Para finalizar clique no botão Salvar Alterações e pronto! Confira a sua nova sidebar.

como-deixar-a-sidebar-do-twitter-transparente-sem-usar-codigos



FIREFOX

1. Instale a extensão Firebug em seu Firefox e reinicie-o após a instalação.

2. Faça login em sua conta do Twitter. Clique no seu username e selecione Configurações.

sidebar-transparente-sem-código

3. Clique na guia Aparência.

sidebar-transparente-no-novo-twitter

4. Agora clique com o botão direito do mouse em qualquer área vazia da página (não em cima das imagens e nem dos botões) e selecione a opção Inspecionar Elemento.

javascript:eval

5. A janela do aplicativo vai abrir para você. No campo de busca, ao lado direito, procure pelo seguinte componente: user_profile_sidebar_fill_color

novo-codigo-sidebar-transparente

6. Este componente será encontrado e marcado no campo dos códigos abaixo. Na mesma linha deste componente acima pesquisado, um pouco pra frente, localize a seguinte tag: value="#DDEEF6" ou algo parecido (no seu o valor pode ser diferente de #DDEEF6, neste caso mexa nele). Veja na imagem abaixo.

sidebar-transparente-com-firebug

7. Agora simplesmente clique sobre o valor "#DDEEF6" (ou o valor que estiver no seu) e apague ele. Depois tecle Enter e feche a janelinha da extensão.

firebug-sidebar-twitter-transparente

8. Para finalizar clique no botão Salvar Alterações e pronto! Confira a sua nova sidebar.

como-deixar-a-sidebar-do-twitter-transparente-sem-usar-codigos



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.

148 comments:

  1. Obrigada! Deu mtoooooooooo certooooooo

    ;*

    ResponderExcluir
  2. Funfou blz kara brigadu!!!

    PS.: pra que serve a extensão Firebug Lite pra Chrome???

    ResponderExcluir
  3. @natii
    Você fez algo errado aí!

    @Anônimo
    O Firebug serve para editar, depurar e monitorar códigos CSS, HTML e Javascript dentro de uma página web.

    No caso deste tutorial, o que a ferramenta fez foi editar o elemento HTML responsável pela cor da sidebar do seu Twitter (o "value").

    Grande abraço e obrigado pelo comentário!

    ResponderExcluir
  4. Depois de muitas tentativas consegui pelo Firefox!
    Vlw mesmo!!!!!

    ResponderExcluir
  5. Como faz para voltar ao normal?

    ResponderExcluir
  6. Muitoo obrigada!! :D
    Mesmo! Estava sempre a tentar com os códigos e nunca conseguia! Obrigada! :D

    ResponderExcluir
  7. Anônimo
    Basta voltar em Aparência e clicar em Salvar Alterações, para a sidebar voltar ao normal.

    ResponderExcluir
  8. Ahh Não funcionou eu fiz pelo google chrome e nao funcionou Poderia me explicar o que deu errado E eu não achei o lugar onde ta escrito Value aki nao mostrou nada só mostrou user_profile_sidebar_fill_color em amarelo e olhei pra ver se tinha o value e nao tinha Poderia me ajudar ?

    ResponderExcluir
  9. e no campo de busca não apareceu 2 mathies apareceu not found

    ResponderExcluir
  10. Obrigadaaa, funcionou perfeitoooo
    Bjosssss
    Marii

    ResponderExcluir
  11. Jééh
    Você procurou logo após o "user_profile_sidebar_fill_color"?

    ResponderExcluir
  12. deu certoooooooooooooooooooooo
    meu mtoo obrigado nem sei como agradecer vc
    tentei o outro com codigo mais da mto trabalho
    vlw por compartilhar ae
    to seguindo seu twitter mi segue di volta :D

    ResponderExcluir
  13. PERFEITO....ACABEI DE FAZER NO CHROME E FUNCIONOU DIREITINHO

    \O/

    MTOO OBRIGADA TE LOVE

    ResponderExcluir
  14. Consegui \õ
    Segue la no twitter @Leticia_zc

    ResponderExcluir
  15. no Firefox funcionou no Chrome :)

    ResponderExcluir
  16. Funcionou perfeitamente aqui o/

    ResponderExcluir
  17. caracaaaa perfeito meu amigo!
    fix no chrome e ficou joia meu tt
    to seguindo vcs la me segue tb

    ResponderExcluir
  18. geente recomendo por esse método, eu entrei em vários sites & nada. Vi esse e pan consegui de primeira.
    Obrigado !

    ResponderExcluir
  19. Afz , eu fiz tudo certinho como esta falando , i naun deu certo ! Meu problema hé tipo o da Jééh
    mais só apareceu o value=" , o #DDEEF6" naun !!
    Bjj i mii ajudee pf !

    ResponderExcluir
  20. Lorraine
    Se esse não deu certo, tente este abaixo:

    http://www.seututorial.com/2011/04/como-deixar-sidebar-do-seu-twitter.html

    Abraços

    ResponderExcluir
  21. Perfeitoooo moço ;)
    Aqui funfou de boa
    Tnx
    Mi segue? @ednafile
    Sigo d volta

    BJUSSSSSS

    ResponderExcluir
  22. Obaaaaaaaaa deu muito certo!!! Vlw beijooo

    ResponderExcluir
  23. no meu tb funcionou direitinho =))
    usei o firefox
    brigadinhaaa
    bjuxxx =*

    ResponderExcluir
  24. OBG!!! me ajudou mt ,valeu

    ResponderExcluir
  25. nossa cara deu super certo!
    muito obrigado!valeu

    ResponderExcluir
  26. parabéns!! amigão,,, deu certo

    ResponderExcluir
  27. demorei pra achar, mas consegui *-* mt bom (:

    ResponderExcluir
  28. aaaaaaadorei mmt obg *-*

    ResponderExcluir
  29. brigadão, esse site é demais deu certo de primeira (: segue lá e avisa que eu sigo de volta @GabihAlmeeida

    ResponderExcluir
  30. Ahh est foi sob medida heem?
    Gostei,custei...ms cabeça não eh só pra carregar piolho née vei? às vezes agent tem que usar ;P

    ResponderExcluir
  31. aaaaaaaah, muito obrigado, realmente ajudou MUITO *o*

    ResponderExcluir
  32. dei moral pra você! ninguém ta conseguindo mais mudar, e eu queria muito! valeu

    ResponderExcluir
  33. não consegui :(
    Eu procurei pelo user_profile_sidebar_fill_color , ele apareceu em amarelo, mais não achei o Value "#DDEEF6"
    Só achei assim Value="#f0f0f0"

    G.F.

    ResponderExcluir
  34. Continuação:
    então, eu tava fuçando aqui
    e apaguei esse "#f0f0f0"
    e deu certo :D
    foi super rápido e ficou ótimo *-*
    bem melhor que esses códigos. Eu usei o Chrome.
    Sigam-me @gabifranca10 (: sigo de volta

    ResponderExcluir
  35. comigo deu certinho. (: @_ellorenna

    ResponderExcluir
  36. Muito bom mesmo! Podem entrar sem medo! Parabéns!

    ResponderExcluir
  37. Eu fiz pelo Chorome e ficou meio azul e não transparente..

    ResponderExcluir
  38. @Patrícia

    Acho que você está confundindo transparência com o background. Às vezes o BG do seu Twitter tem um tom azulado, e com a sidebar transparente, o azulado fica bem mais visível (uma vez que a sidebar não possui cor).

    Enfim... ou ele fica transparente ou não fica! Simples assim. Não tem essa de ficar azul, aliás, não tem como! Você certamente alterou outra coisa no código - e não o que está no tutorial.

    Att

    ResponderExcluir
  39. No meu nao aparece o inspecionar elemento Por que ?

    ResponderExcluir
  40. Porque você está clicando no lugar errado!

    ResponderExcluir
  41. Obrigada!
    Aqui funcionou tb certinho :*

    ResponderExcluir
  42. Camila Campos:
    oii eu tentei fazer pelo firerox só que na hora de clica no botão não apareceu o inspecionar elemento :(

    ResponderExcluir
  43. nao precisei instalar a extensao
    fiz pelo chrome xD
    vlw man!

    ResponderExcluir
  44. Eu Acho neem fiz certoo ! kk' Mas Obrigado mesmo assiim *---

    ResponderExcluir
  45. ola, eu consegui, mas só no meu tt ta transparente, pras pessoas que olham o meu nao esta tranparente.. fiz algo errado ?

    ResponderExcluir
  46. Olá
    Você pode passar seu Twitter para que eu possa ver?
    É estranho isso! Todo mundo deveria estar visualizando como você.

    Você realmente alterou o que mostramos no tutorial? Pois pela quantidade de códigos pode deixar a pessoa meio confusa na hora de remover a parte correta.

    Abraços

    ResponderExcluir
  47. OBRIGAAAAAAAAAAAAAAAAADA, deu super certo (:

    ResponderExcluir
  48. OI , não estou conseguindo. Eu fiz tudo direitinho mas não aparece o "value="#DDEEF6"" Eu procurei logo após o " user_profile_sidebar_fill_color " mas só aparece isso em amarelo . Tenho o Chrome
    Tainá

    ResponderExcluir
  49. Perfeito a vídeo aula. Entendi maravilhosamente bem Marcelo.

    Brigadaaaaaaaaaaaaaaa =)

    ResponderExcluir
  50. Valeu mesmo ;
    me ajudou bastante cara.
    Brigadoooo :)

    ResponderExcluir
  51. ae kara valeu mesmo me ajudou muito eu consegui e agora eu to muto feliz kkk valeuw mesmo abraços.

    ResponderExcluir
  52. FUNCIONOU ! MUITO OBRIGADO (:

    ResponderExcluir
  53. gentennn,
    eu achei o value e tudo, mais não consegui apaga o código.... só seleciona, não dá pra mexer, dá uma helpppp aqui

    ResponderExcluir
  54. Nossa, muito mais fácil do que com o código!

    ResponderExcluir
  55. Nossaa ... muito legal mesmo ... amei sério... *-* valew mesmo viiu ? =)

    ResponderExcluir
  56. Oi, gostaria de dizer que este é um ótimo tutorial, e dizer também que consegui fazer de uma maneira bem mais fácil. Eu não estava conseguido fazer assim, aí eu mexi aqui e cliquei em Styles. Lá tem várias "caixinhas" que conforme você passar o mouse em cima, aparecerá se aquela opção está marcada ou desmarcada. No meu caso todas estavam marcadas, então eu li e vi que uma era sobre a sidebar e desmarquei. Fechei e cliquei em perfil, e então a sidebar estava transparente. Sinceramente não me lembro o que estava escrito quando eu desmarquei,rs, só sei que agora não aparece mais desmarcada ou desmarcada, seu eu visse eu lembraria, e não tem nenhuma desmarcada. Pensei que você poderia tentar ver e quem sabe entender e fazer um tutorial. {:

    ResponderExcluir
  57. Olá Jucy Rodrigues

    Opa, toda dica e sugestão é muito bem-vinda! Com certeza darei uma bisbilhotada nesse procedimento que você passou.

    Embora o tutorial seja bem fácil, pois não tem segredo algum, darei uma olhadinha no que você falou.

    Abraços

    ResponderExcluir
  58. consegui *-* valeu , eu ja tinha tentados outros sites e nada, esse aí eu conseguir de primeira, obrigada .

    ResponderExcluir
  59. @Jucy Rodrigues

    Não conseguimos identificar o componente "Styles" que você citou. Se puder dar uma referência da localização deste componente facilitaria nosso trabalho.

    Abraços

    ResponderExcluir
  60. eu nao consigo apagar esse codigo. no meu caso é #ffffff. Da pra ajudar?? obrigada

    ResponderExcluir
  61. valeeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

    ResponderExcluir
  62. O meu deu certinho *---* é só prestar bem atenção que dá certo SIM ;) vlw ;*

    ResponderExcluir
  63. Aii muito obg eu aprendi o meu ta trasparente

    ResponderExcluir
  64. MUITOOO BOM, EU AMEI *-* tava tentando faze isso e não conseguia, mas vendo seu tutorial consegui ^^ MUITO OBRIGADO!!!

    ResponderExcluir
  65. deu certo , muito obrigada *-*

    ResponderExcluir
  66. aiiii no meu deu certoooooo *----* enfim conseguiii, vlwwwwwwww ♥
    bjjsss

    ResponderExcluir
  67. aaaaaaaaa ajuda :_
    eu consegui colocar transparente , mais dpois fui colocar uma foto d fundo e tals. SAIIIU E AGORA NÃO TO CONSEGUINDO COLOCAR :_ AJUDA :( ahaha'
    eu não to conseguindo apagar aquele negocinho la '-'
    #HELP

    ResponderExcluir
  68. Camii, quando você altera o background, a sidebar também é modificada! Você deveria ter feito o contrário.
    Porém, como podemos ajudá-la? Você está identificando o componnte "user_profile_sidebar_fill_color"?

    ResponderExcluir
  69. Sim, eu encontro o ''user_profile_sidebar_fill_color'' ai toda a linha é amarela, o value=''... ? ? O meu é , por isso eu não consigo apagar :(
    e tem q apagar o ''value..' também ? ou só o ''#... ?? ;s

    ResponderExcluir
  70. Camii, só pode apagar o que está dentro das aspas. Apague somente os dados dentro das aspas do value.
    Exemplo: value="#FFFHG56". Você deve apagar apenas os caracteres #FFFHG56 e pressionar Enter. Depois é só fechar a janlinha do código-fonte e clicar em Salvar Alterações.

    ResponderExcluir
  71. eu achei aki o value com "*CODFEC"> mas não to conseguindo apagar.o que eu faço? me ajuda porfavor!

    ResponderExcluir
  72. não precisa mas responder a pergunta anterior já consegui pelo google muito obrigado!

    ResponderExcluir
  73. aiiii conseguiiii :')
    obrigada Marcelo :)
    bjss c2'

    ResponderExcluir
  74. aaaa euu conseguii , briigadão. u-u

    ResponderExcluir
  75. oo do firefox funcoinou no crhome velw...
    segue..lá sigo de volta

    ResponderExcluir
  76. aaaaa' Deu certo neim um dos codigos deu somente esse ( Fiz pelo Google Chrome )

    ResponderExcluir
  77. Não to conseguindo editar o : value="#DDEEF6"

    =(

    me ajuda?

    ResponderExcluir
  78. Qual é o navegador e a versão usada?
    Twitter novo ou antigo?
    Sem maiores detalhes não posso ajudar!

    ResponderExcluir
  79. Ajudou muito principalmente no chrome ;D

    ResponderExcluir
  80. VALEU AJUDO MUITTOOOOOOO

    ResponderExcluir
  81. Haaaaha conseguiiiiiii valeu povo Segue ai @Steeh_bs

    ResponderExcluir
  82. Vlww brow aqui resolveu tb =)
    Galera é facinho.......

    ResponderExcluir
  83. Ae pode dar uma força? Eu uso o Google Chrome e o meu aparece 1 match e o seu aparece 2 match na hora de procurar user_profile_sidebar_fill_color me ajuda?

    ResponderExcluir
  84. Anônimo, não tem problema. É que no meu há duas referências do componente. No seu pod ehaver apenas uma. O que não afeta em nada no processo.

    ResponderExcluir
  85. nossa, muito interessante, mudava sempre por códigos, mas deu super certo.

    obrigada! e parabéns ;$

    ResponderExcluir
  86. obriiigada, deu certoo *-*
    @KarineTaynnara @JonasDelicioso e @MyDreamCrazy =)o resultado é ótiimo ...

    ResponderExcluir
  87. SHOOOOOOOOOOW! valeu cara. otimo tutorial!

    ResponderExcluir
  88. Adorei , deu certinho . Obg ! ;D

    ResponderExcluir
  89. É.. funcionou.. rápido e prático.. valeu pela dica! e se alguém quiser me seguir.. ai está .. @fchristovam .. =)

    ResponderExcluir
  90. hahahaahhaahaha, tentei de todos os jeitos com codigos e nao deu, assim deu! Obrigado!

    ResponderExcluir
  91. nossa muito obrigado,deu certinho...nota 100000000000000000000000 bjs

    ResponderExcluir
  92. Velho, já não sabia mais o que fazer sem conseguir deixar a sidebar transparente. Hahahahah, tu é fera, brigada!

    ResponderExcluir
  93. Cara Obg mesmo , eu ñ tava conseguindo com códigos mas essa dica foi ótima OBg

    ResponderExcluir
  94. oi... não estou conseguindo... faço do jeito que está falando aqui, e quando salvo as alterações ainda continua com cor... alguém pode me ajudar!

    Obrigada

    ResponderExcluir
  95. Mtoo bom HAHAH' consegui *-*

    ResponderExcluir
  96. onnnnnnnnnnnw euteamo ! ♥

    ResponderExcluir
  97. Funcionou perfect aqui amore, mto obg !

    ResponderExcluir
  98. não consigo de jeito nenhum... nem pelo firefox e nem pelo Google. faço extamente como esta falando aqui nas dias versões e ainda continua branco... :(

    alguém me ajuda?

    Juliana

    ResponderExcluir
    Respostas
    1. Juliana, se quiser que façamos para você, informe-nos em nosso Twitter.

      Excluir
  99. Vinha tentando a bastante tempo e nenhum código funcionava, finalmente, com esse meio deu certo. Obrigada! Larissa.

    ResponderExcluir
  100. Deu super certooooo!!!

    Quem quiser ver [ou seguir], RSSSS @priscila_mlc

    ResponderExcluir
  101. uhhul eu consegui finalmente . Obgd ,
    Mais quando eu vou troca a imagem de fundo o translade sai e fica normal . u-u
    maiis vlws mesmo

    ResponderExcluir
    Respostas
    1. Realmente tem esse problema. Quando você altera a imagem de perfil ou do background, os valores do código-fonte do componente retornam. Estamos tentando encontrar uma maneira de evitar isso.

      Mas é só na primeira vez que você troca as imagens.

      Excluir
  102. Nossa eu ameei!!!
    Funcionou perfeitamente!!
    melhor do que com código que não tava dando certoo!
    amei o tutorial ta facinho de entender!!

    parabéns e obrigada!!! xD

    ResponderExcluir
  103. Tentei fazer no Chorme não deu, mas consegui deichar a sidebar transparente com o Mozila :D

    ResponderExcluir
  104. no meu não aparece esse tal de value, o que eu faço?
    Patricia

    ResponderExcluir
    Respostas
    1. Patricia
      Procure certinho aí. É impossível o "value" não estar seu código-fonte, uma vez que sem ele, sua sidebar nem apareceria!

      Se quiser, podemos fazer o procedimento para você. Para isso, é só nos procurar em nosso Twitter.

      http://twitter.com/seututorial

      Excluir
  105. Nossa ameeei eu Comseguiiir Valeew ! *----*

    Obrigado!

    ResponderExcluir
  106. usei chrome e deu certo, brigada kk

    ResponderExcluir
  107. No twitter novo dá certo?? Eu tentei pra ver..mas como não tem mais aquela barra lateral..não mudou nada. Pensei que conseguiria deixar o fundo totalmente transparente. Tem alguma dica ai?

    ResponderExcluir
    Respostas
    1. O Twitter novo não precisa porque simplesmente o layout é outro. Deixar ou não a sidebar transparente no Twitter novo é a mesma coisa, pois a sidebar (esquerda no caso do novo TT) já é transparente por padrão.

      Excluir
  108. Caramba tentei mais de 280 vezes os outros códigos , consegui só nesse cara eu te amo..

    Vlw brigadão mesmo *---* ♥

    ResponderExcluir
  109. consegui *--------*
    tava procurando isso em tudo o que era lugar mas não tava conseguindo deixar transparente
    brigada mesmo *--*

    ResponderExcluir
  110. funcionou muito de boa, o codigo que eu usava não tava mais funcionando no Chrome, e funcionou agora! obrigado

    ResponderExcluir
  111. ameiiiiiiii, deu totalmente certo! eu não estava conseguindo com os códigos de outros sites, mas com esse método, deu certinho!! obrigada =)

    ResponderExcluir
  112. Estou usando o crhome, porem nao aparece o código na minha busca, aparece NOT FOUND... e agora?

    ResponderExcluir
    Respostas
    1. Se está usando o novo Twitter, não tem como colocar a transparência.
      Tudo mudou neste Twitter 2012. O tutorial aplica-se apenas para quem tem o perfil antigo do TT.

      Excluir
  113. Não funciona mais mesmo por causa do Twitter novo.

    ResponderExcluir
  114. ooooooo me responde no meu não encontrei não

    ResponderExcluir
  115. Não funciona mais com o novo Twitter amigo.

    ResponderExcluir
  116. atualização 2019:
    copie e cole o @ abaixo, mas antes de salvar tire o @.
    quando abrirem seu perfil, aparecerá esses dois risquinhos no nome, mas na timeline nao aparece nada



    ‏ً
    @

    ResponderExcluir