Barra de rolagem colorida

|
Tumblr_lyk9cfygts1qjywbko1_500_large
Começamos a maratona de tutoriais com uma dica bem legal e que dá um ar todo especial ao seu layout (desde que usada com bom senso).

Ao final do tutorial, a barra de rolagem do seu blog vai ficar mais ou menos assim:

Vamos começar?
No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.
 Aperte Ctrl+F, procure por ]]></b:skin> e cole antes esse código:


/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
width:15px; /*Largura da barra de rolagem*/
 background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

É só alterar as cores conforme indicado, visualizar, e se estiver tudo certo, salve. Se não quiser cantos arredondados, apague as partes em verde.
Se usarem creditem o Cherry Bomb e o Quinze para meia noite.

131 comentários

  1. amei o turorial bem explicadinho
    bjs http://dezapaixao.blogspot.com/

    ResponderExcluir
  2. Perfeito! já vou usar!

    caprichosa-cl.blogspot.com

    ResponderExcluir
  3. Adoro colocar barra colorida no blog. Acho que, dependendo de como ele coloque, fica muito lindo!
    Beijos.
    http://simplesmente-teens.blogspot.com

    ResponderExcluir
  4. Thifany Victovososke Machado30 de janeiro de 2012 às 15:42

    Primeiraaa !!! =^.^=
    Amei o post Liah !

    http://fashion-thi.blogspot.com

    ResponderExcluir
  5. Liah,  me responde uma dúvida:Qual é a diferença entre promoções, sorteios e concursos...

    Cozinhando com o Minduim

    ResponderExcluir
  6. estava procurando esse tuto, todos que eu achava dava errado, mas esse funcionou rs'
    bjs
    http://milla-notciasteen.blogspot.com

    ResponderExcluir
  7. Oii Liah, gostei muito do tutorial minha flor (:
    Beijos

    ResponderExcluir
  8. AAin,acho esse detalhe muuito lindo,mas fico com medo de colocar no blog por não saber se é muito pesado pros visitantes...você acha que fica pesado Liah??
    Se não ficar,acho que vou colocar esse detalhe no lay do •My Mємσяιєѕ...•!! XD

    Beeijos
    http://blogmymemories.tk

    ResponderExcluir
  9. Liah, esse menina plagiou seu blog. Veja se a sidebar ner muito parecida com a sua, só mudou as cores. mas verse que e plagio claramente.
    http://girlsrepublic-s2.blogspot.com/

    ResponderExcluir
  10. Ah eu já uso, minha barra não tem muitos detalhes, é da simples, mas mesmo assim é bonitinha ^^

    ResponderExcluir
  11. É um tuto super fácil, e fica lindo no layout! ;)

    http://www.world-cutest.blogspot.com/ 

    ResponderExcluir
  12. Adorei o tutorial bem explicado e o lay fica lindo com essa barra *-*

    Go Belezando

    ResponderExcluir
  13. fica lindo *-* e liah porfavor faz um tutorial de como fazer BG's? (quem concordar pede pra ela também)

    ResponderExcluir
  14. Tuto super bem explicado, e super útil! Acho que seria legal se você postasse vectores como os do seu cab. ^^ E um tuto super bem procurado é o  de como fazer o titulo do gadget assuntos, do Trechy Teen .
    beijos :*
    www.cinderelaaocontrario-18.blogspot.com

    ResponderExcluir
  15. Adorei, tava procurado há um tempo, mas eu nunca consegui entender os outros tutoriais *--*

    www.blog--runway.blogspot.com

    ResponderExcluir
  16. Amei o blog!Muito lindo!

    http://www.blog-lightblue.blogspot.com/

    ResponderExcluir
  17. Ameei esse tutorial (:
    bjaao
    http://sooulteen.blogspot.com

    ResponderExcluir
  18. Que lindinha a barra! No meu próximo design vou tentar fazer esse tuto!
    Novo post lá, confere? Bjs...
    http://wronggirl-ann.blogspot.com/ 

    ResponderExcluir
  19. Amo o cherry não sei se vc lembra de mim sou dona do falecido Pequena Cpntradição visita meu novo blog se gostar comenta e segue!

    ResponderExcluir
  20. huum ... no mozilla não funciona :\

    http://docevenenoblog.blogspot.com/

    ResponderExcluir
  21. O tutorial é muito bom! E Liah, você tinha barra de rolagem colorida mas não está mais aparecendo aqui, você tirou? Bjbj

    http://cabidemoderno.blogspot.com

    ResponderExcluir
  22. É a barra de rolagem é mesmo fofa! Liah, ensina a colocar uma caixa de pesquisa personalizada tipo a sua? Bjs
    http://cantoseencantosdahellen.blogspot.com 

    ResponderExcluir
  23.  Muito legal o tuto . Parabéns.
    sucessoparaseublog.blogspot.com

    ResponderExcluir
  24. Oi! Muito legal o tuto >.<
    Mas tem um problema '~' eu o usei lá, na primeira deu certo, depois não aparece mais  a barra de rolagem (eu uso o Google Chrome).Eu não entendo .-. eu fiz tudo certo, mas não está dando.

    Bai Bai...

    ResponderExcluir
  25. Maravilhoso.^-^
    Já estou usando *-*
     E o Blog é ótimo ^.~

    ResponderExcluir
  26. Oi,eu gostaria de dicas para o meu blog, comecei ele neste domingo 29/01 e gostaria de dicas...Ah e como é que vocês colocaram esse modelo de comentário bacana?!Espero respostas bjos!

    ResponderExcluir
  27. Olá, vc sabe dizer se essas inst de barra de rolagem, servem pra nova versão do Blogspot? Sou leiga e tenho conseguido algum progresso, mas às vezes não consigo.
    Obg.

    ResponderExcluir
  28. Muuuitoo obrigada adore o CB!!

    ResponderExcluir
  29. amei o tutorial!!Sempre visito o seu blog!
    http://efeitosforps.blogspot.com/

    ResponderExcluir
  30. Gostei, ficou muiito lindo, adoro os seus tutorias, você esta de parabéns :)
    http://jovememulherdedeus.blogspot.com/

    ResponderExcluir
  31. Eu usei o tutu no meu blog , e creditei mais se não gostar eu excluo beijos
    http://modaecompaniaup.blogspot.com

    ResponderExcluir
  32. Adorei aqui flor, gostei também do tutorial ficou muito legal.
    Seguindo aqui....

    http://our-teen-dream.blogspot.com/

    ResponderExcluir
  33. Coloquei e ficou 10! ;)
    http://belovely-girl.blogspot.com/

    ResponderExcluir
  34. ai amiga me ajuda eu coloquei seu tuto ok mais ai eu fui colocar outro e ai a minha barra de rolagem sumiu
    http://blogdagabidreamgirl.blogspot.com.br/

    ResponderExcluir
  35. liah pq q essa barra só aparece quando vc esta no Chrome?

    ResponderExcluir
  36. fiiz no meu blog e ameiii !! *-*
    http://karolsapink.blogspot.com.br/

    ResponderExcluir
  37. Olá! Eu segui um tutorial pra mudar a barra de rolagem, mas a minha ficou com as pontas arrendondas, como fazer pra deixar quadradinho como a sua barra?
    Beijo.

    http://curinotizando.blogspot.com.br/

    ResponderExcluir
  38. EU GOSTARIA MUITO E COM URGENCIA SABER COMO REMOVER A BARRA DE ROLAGEM ROSA DO MEU BLOG,INFELISMENTE NÃO FICOU COMO EU ESPERAVA E EU AGORA NÃO SEI COMO REVERTER ISSO

    ResponderExcluir
  39. amei ficou muito massa mas uma vez vcs salvam meu da!
    bjs

    ResponderExcluir
  40. Não estou conseguindo, o que será que estou fanzendo de errado?

    ResponderExcluir
  41. nossa , super simples eu pensei que era um monte de coisas!!kkk
    http://maisdequeanimes.blogspot.com.br/

    ResponderExcluir
  42. como assim coloque borda?? como fazer??

    ResponderExcluir
  43. ficou lindo esse post adorei muito,que é um post simples qualquer um pode fazer.OBS:eu repassei o post não se você vai deixar mais ta lá qualquer coisa mim avisa.
    http://meninovisualnerd.blogspot.com.br/

    ResponderExcluir
  44. Não pegou :( vou tentar de novo se não eu não salvo minha pele (Meus leitores são maus kk!

    www,docedegarotinha.blogspot.com/

    ResponderExcluir
  45. Heeýy, princess!! Eu fiz um último comentário em um post(só não lembro qual), que eu falei "Estragou meu blog", e peço mil desculpas por isso, eu que devo ter feio algo errado..
    Kisses♥

    ResponderExcluir
  46. ain , Obrigadão viu Liah ? Ajudou muito !
    Ficou mega fofo *--*

    www.interligada-i.blogspot.com

    ResponderExcluir
  47. perfect... consegui rapidinho ><
    http://danielasapereira.blogspot.com/

    ResponderExcluir
  48. Amei, ja estou usando! ajudou mt , brigada!

    ResponderExcluir
  49. amei! ajudou mt brigada!

    www.blog-goodiesworld.blogspot.com

    ResponderExcluir
  50. Obrigada pela dica, funcionou bem no blog. Abraços moça

    ResponderExcluir
  51. Adorei mesmo de verdade, meu blog esta ficando perfeito com as suas dicas. Obrigada me ajudou muito.

    ResponderExcluir
  52. Olá Liah Sá....Bem no meu html o código [[> sempre dá erro e fala erro ao asinalar o código XML o que eu faço??Bjs maria

    http://cherebebel.blogspot.com.br/

    ResponderExcluir
  53. só quero conferir um negócio, nesse linha:
    background: #000000; /*Cor da parte fixa, que fica no MUNDO*/

    é fundo não? hsauishu

    ResponderExcluir
  54. Liah, sempre que eu tento fazer upload de um template no meu blog, não pega :/ me ajuda?

    ResponderExcluir
  55. Liah,amei,tou começando um novo blog,o nome é Simples garota :simples-garotaa.blogspot.com
    tou tentando criar um blog mais organizado e gostaria que vc me ensinasse algumas coisas:
    1ºcomo deixar meus comentarios assim que nem o seu,coloridinho!

    2ºAquela datinha eu queria que ficasse uma Bolinha que nem o seu de fundo e a data encima sabe...

    3ºComo colocar e esse negocio de voltar pro topo do blog?

    4ºAfiliados,o que é isto e como eu conseguir?

    se puder responder vai lá no meu blog e responde pra mim por favor,tou te emplorando,pois ninguem quer me ajudar! :(

    ResponderExcluir
  56. Liah,posso reblogar???Ahn,eu não consegui usar!

    ResponderExcluir
  57. Ameii Usei e ficou bem cute!
    Passa la:
    http://ateliedaitgirl.blogspot.com.br/

    ResponderExcluir
  58. amei o tutorial
    http://brendaadantas.blogspot.com

    ResponderExcluir
  59. adoreii o tutorial
    seguindo segue de vouta?
    http://ingreddmedeiros.blogspot.com.br/

    ResponderExcluir
  60. Amei muito bem explicado, eu nunca consegui mexer no HTML do blog dessa vez eu consegui. Onrigada por ajudar!

    http://sweet-love-sz.blogspot.com.br/

    ResponderExcluir
  61. Coloquei mas no meu blog só aparece a barra fixa a barrinha de rolagem não aparece. O que fiz errado?

    ResponderExcluir
  62. Como faço pra diminuir o tamanho da barrinha de rolagem?

    ResponderExcluir
  63. seu blog é maravilhoso! E eu ainda cantei "hello daddy, hello mom...i'm your ch-ch-ch-ch-ch-cherry bomb!" quando abri hahah

    ResponderExcluir
  64. Mt bom me ajudou mtmtmt!!
    Veja como fiz o meu, se gostarem do blog sigam!!
    http://blogfantastic-g.blogspot.com

    ResponderExcluir
  65. Não funcionou!
    sanduichedeassunto|blogspot

    ResponderExcluir
  66. Ameii <3

    Estou usando todos os tutoriais aqui para iniciar mais um blog (:
    desejos-secretoss.blogspot.com.br/

    ResponderExcluir
  67. Coloquei no meu blog já, ficou perfeito ***.***
    Nyah, valeu pelo ótimo blog! Não sei o que seria do meu sem ele.
    Ah, se puder visita ?
    http://fasciniootaku.blogspot.com.br/
    Meu blog recomenda anime e mangás, ele também te ensina o básico do japonês e algumas curiosidades do Japão.
    Já que você gosta de anime acho que vai gostar dele.

    ResponderExcluir
  68. Finalmente eu achei um tutorial que desse certo!!
    Estou a usar essa barrinha muito fofa, obrigada! ^^

    ResponderExcluir
  69. Qual é o Modelo do seu Blog? Me responde como vc editou assim!!! Pfff!

    ResponderExcluir
  70. \Õ/ minha alegria ao ver tudo dando certinho =D

    ResponderExcluir
  71. Está escrito errado "Cor da parte fixa que fica no mundo" kkkkk

    ResponderExcluir
  72. Lindo amei , Visitem o meu blog rs' : http://sejavocemesmayourself.blogspot.com.br/ , amo os tutoriais !!

    ResponderExcluir
  73. nossa muito legal já estou usando http://essenciaffeminina.blogspot.com.br

    ResponderExcluir
  74. adorei, meninas para mudar as cores é só acessar:Tabela de cores que tem os códigos das cores e voce podera editar direitinho :). Ah não esqueçam de fazer uma visitinha ao meu blog,clicando Aqui *-*

    ResponderExcluir
  75. porfavor participem : semprebarbieforever.blogspot.com ... Eu agradeço de coração !! Obrigada e eu amoooooooooooooooooooooo o cherry bomb !

    ResponderExcluir
  76. Nyah *-* amei seu blog, e essa postagem me ajudou muuito *-* To aprendendo ainda, mas até que já ta ficando bonitinho meu blog.. Adorei o tutorial, bem explicadinho.
    Se quiser fazer uma visitinha para essa iniciante aqui..

    tempestadedearte.blogspot.com = ' - ' =

    Kissus, e muito muito obrigada pela ajuda (:

    ResponderExcluir
  77. Créditos pra vocês de quase todos os detalhes do blog
    http://antesdas3.blogspot.com.br/ *-*

    ResponderExcluir
  78. Visita Meu Blog Galerinha
    http://apenasjayanne.blogspot.com.br/

    ResponderExcluir
  79. Ooi eu peguei o seuu tuto para meu blog descupe se for um encomodo pra você mais claro eu botei créditos visita meu amr
    http://www.karenkawaiii.blogspot.com.br/
    blg maravilhoso eu ameei

    se for um encomodo pra você eu pegar esse seu maravilhoso tuto eu mudo tá bejss

    ResponderExcluir
  80. olá muito segal eu rebloguei no meu blog e créditei lá bjs

    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  81. Adorei :3 eu usei ... Mas eu pus os créditos ^^

    http://joaneta-chan.blogspot.com.br/

    ResponderExcluir
  82. O meu n aparece esse ]]> codigo pq ? '-' me ajuda pf !

    ResponderExcluir
  83. Olá.
    Gostaria de saber se foi você quem criou esse tutorial pra poder me ajudar,porque no meu blog quando eu abro a caixa de procura apertando Ctrl+F não aparece nada, fica um número 0. Será que é o modelo do blogger? Tem como dar alguma dica?
    Obrigada.

    ResponderExcluir
  84. com esse novo modelo não dá pra ver a parte verde!

    ResponderExcluir
  85. não eu colei isso ]]> e ele não encontrou nada

    ResponderExcluir
  86. http://diariodeumagarotas22.blogspot.com.br/

    ResponderExcluir
  87. Este comentário foi removido pelo autor.

    ResponderExcluir
  88. Hey, no meu editar html num tem ]]>
    o que faço?

    chibimakervamorcriar@blogspot.com

    ResponderExcluir
  89. No meu funcionou!Vou dar créditos la no meu blog:
    www.manualdameninacr.blogspot.com

    ResponderExcluir
  90. Super Fofo o Tuto ...
    Visitem meu blog = BlogConversandoComALua.BlogSpot.Com

    ResponderExcluir
  91. Super Bacana...Olhem a Mixtagem que eu Fiz no Meu ...
    www.downbown.bra.vc ou www.downbown.blogspot.com

    ResponderExcluir
  92. obrigada seguem meu blogg pff sentimentos de adolescentes bjss

    ResponderExcluir
  93. Ficou super lindo já tentei isso varias vezes por tutos de outros blogs mas não consegui mas com esse finalmente eu consegui brigadinha!

    ResponderExcluir
  94. Mito útil :)

    http://backgroundsdeartistas.blogspot.com.br/

    ResponderExcluir
  95. Este comentário foi removido pelo autor.

    ResponderExcluir
  96. Olá! Em nenhum blog meu eu consigo editar o HTML Por quê? Vc pode me ajudar?
    serumagarotanamoda.blogspot.com

    ResponderExcluir
  97. Me ajudou muito, parabéns. Obrigado, moças.

    estanteradioativa.blogspot.com

    ResponderExcluir
  98. Amei,muito obrigada!
    http://novidades-de-menina.blogspot.com/

    ResponderExcluir
  99. No meu não mudou nada, porque???????????

    ResponderExcluir
  100. Este comentário foi removido pelo autor.

    ResponderExcluir
  101. Adorei o tutorial, deu super certo, obrigada <3
    http://www.leticiakoliveira.com/

    ResponderExcluir
  102. Muito obrigada mesmo! O tutorial deu super certo no meu blog! Não sei nem como agradecer!

    ResponderExcluir
  103. anw, fica tão fofo ♥
    http://asdezprimaveras-blog.blogspot.com/

    ResponderExcluir
  104. Este comentário foi removido pelo autor.

    ResponderExcluir
  105. Tutorial perfeito ♥ Meu Layout ficou muito mais estiloso e fofo ☺ Obrigada ♥

    ResponderExcluir
  106. Parabéns pelo Blog, ajuda mt gente inclusive eu.Usei o código, é fácil e eficiente, amei amei amei !!
    http://vida-semfim.blogspot.com.br

    ResponderExcluir
  107. Obrigada Liah! Tava mesmo a fim desse tutorial e já tinha tentado o de outros blogs, mas sem sucesso. Meu blog ainda está em construção, mas quando estiver pronto te mando o link pra você ver que haverá uma caixinha para creditar a personalização do meu blog e o seu estará lá! Obrigada!

    ResponderExcluir
  108. Adicionei mas por algum motivo a barrinha apareceu por um tempo e agora (pelo menos aqui no meu computador) ela sumiu! Minha barra incorporou o Wally ahahhaha. Enfim, se alguém quiser me ajudar a "procurar" minha barrinha o link é esse: http://acrossttheuniverse.blogspot.com.br/ Beijão :)

    ResponderExcluir
  109. Eu não consegui =´( Pode me ajudar?
    http://meumundokawaii-tutoriais.blogspot.com.br/

    ResponderExcluir
  110. Eu não consegui =´( Pode me ajudar?
    http://meumundokawaii-tutoriais.blogspot.com.br/

    ResponderExcluir