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.

132 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. Oii flor,adoreii seu blog,estou seguindo segue de volta??aceitáh afiliação??http://teenagestarblog.blogspot.com/

    ResponderExcluir
  5. Thifany Victovososke Machado30 de janeiro de 2012 15:42

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

    http://fashion-thi.blogspot.com

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

    Cozinhando com o Minduim

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

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

    ResponderExcluir
  9. 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
  10. 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
  11. Ah eu já uso, minha barra não tem muitos detalhes, é da simples, mas mesmo assim é bonitinha ^^

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

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

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

    Go Belezando

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

    ResponderExcluir
  15. 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
  16. Adorei, tava procurado há um tempo, mas eu nunca consegui entender os outros tutoriais *--*

    www.blog--runway.blogspot.com

    ResponderExcluir
  17. Amei o blog!Muito lindo!

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

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

    ResponderExcluir
  19. ana.amelia.meireles31 de janeiro de 2012 11:37

    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
  20. 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
  21. huum ... no mozilla não funciona :\

    http://docevenenoblog.blogspot.com/

    ResponderExcluir
  22. 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
  23. É a barra de rolagem é mesmo fofa! Liah, ensina a colocar uma caixa de pesquisa personalizada tipo a sua? Bjs
    http://cantoseencantosdahellen.blogspot.com 

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

    ResponderExcluir
  25. 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
  26. Maravilhoso.^-^
    Já estou usando *-*
     E o Blog é ótimo ^.~

    ResponderExcluir
  27. 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
  28. 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
  29. Muuuitoo obrigada adore o CB!!

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

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

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

    ResponderExcluir
  33. Adorei o tutorial.
    Ficou ótimo.
    Beijos

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

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

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

    ResponderExcluir
  36. 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
  37. liah pq q essa barra só aparece quando vc esta no Chrome?

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

    ResponderExcluir
  39. 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
  40. 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
  41. amei ficou muito massa mas uma vez vcs salvam meu da!
    bjs

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

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

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

    ResponderExcluir
  45. 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
  46. 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
  47. 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
  48. ain , Obrigadão viu Liah ? Ajudou muito !
    Ficou mega fofo *--*

    www.interligada-i.blogspot.com

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

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

    ResponderExcluir
  51. amei! ajudou mt brigada!

    www.blog-goodiesworld.blogspot.com

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

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

    ResponderExcluir
  54. 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
  55. só quero conferir um negócio, nesse linha:
    background: #000000; /*Cor da parte fixa, que fica no MUNDO*/

    é fundo não? hsauishu

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

    ResponderExcluir
  57. 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
  58. Liah,posso reblogar???Ahn,eu não consegui usar!

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

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

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

    ResponderExcluir
  62. 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
  63. Coloquei mas no meu blog só aparece a barra fixa a barrinha de rolagem não aparece. O que fiz errado?

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

    ResponderExcluir
  65. 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
  66. Mt bom me ajudou mtmtmt!!
    Veja como fiz o meu, se gostarem do blog sigam!!
    http://blogfantastic-g.blogspot.com

    ResponderExcluir
  67. Não funcionou!
    sanduichedeassunto|blogspot

    ResponderExcluir
  68. Ameii <3

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

    ResponderExcluir
  69. 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
  70. Finalmente eu achei um tutorial que desse certo!!
    Estou a usar essa barrinha muito fofa, obrigada! ^^

    ResponderExcluir
  71. Ki legal o meu fokou otimoo vlw *_*

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

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

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

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

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

    ResponderExcluir
  77. 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
  78. porfavor participem : semprebarbieforever.blogspot.com ... Eu agradeço de coração !! Obrigada e eu amoooooooooooooooooooooo o cherry bomb !

    ResponderExcluir
  79. 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
  80. Créditos pra vocês de quase todos os detalhes do blog
    http://antesdas3.blogspot.com.br/ *-*

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

    ResponderExcluir
  82. 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
  83. olá muito segal eu rebloguei no meu blog e créditei lá bjs

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

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

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

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

    ResponderExcluir
  86. 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
  87. com esse novo modelo não dá pra ver a parte verde!

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

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

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

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

    chibimakervamorcriar@blogspot.com

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

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

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

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

    ResponderExcluir
  96. 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
  97. Mito útil :)

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

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

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

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

    estanteradioativa.blogspot.com

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

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

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

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

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

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

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

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

    ResponderExcluir
  109. 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
  110. 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
  111. 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
  112. Eu não consegui =´( Pode me ajudar?
    http://meumundokawaii-tutoriais.blogspot.com.br/

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

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...