domingo, 7 de agosto de 2011

Barra de rolagem redonda e quadrada

Tumblr_m6zb9u4n2z1rah592o1_500_large
Hooy gente  hoje eu vou ensinar como colocar uma barra de rolagem! Olha mais ou menos como vai ficar:
 Lembrando que as cores são personalizáveis! 

Vá em editar HTML dê um ctrl  f  e na barra de pesquisa que apareceu procure por:




Esse código vai aparecer destacado ANTES dele cole o código abaixo:




::-webkit-scrollbar-thumb:vertical {
background: #FF69B4;
height:50px;
border: 2px solid #FFFFFF;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #beFbdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(URL DO BACKGROUND FIXO) repeat;
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
}



 No 1° trecho destacado de vermelho você pode trocar pela cor que te agrada (clique aqui para ver uma tabela de cores).

 No 2° trecho destacado de vermelho coloque a URL do seu background (o fundo da barra de rolagem).

Visualize se estiver tudo ok salve! 
:iconcutepandaismybf:

60 comentários :

  1. Oi flor...
    Achei seu blog muuuuuito lindo!!
    Estou te seguindo por aqui...
    Vou aproveitar as suas dicas para personalizar o meu blog.
    Beijos

    ResponderExcluir
  2. Cara teu blog é show...adorei!
    Já coloquei a barra lá no meu cafofo!kkkk!
    bjs, paz e boa semana!
    http://guerradosmundosleka.blogspot.com/
    http://gifsblogtestfriend.blogspot.com/
    http://gifsblogtestfriend.blogspot.com/

    ResponderExcluir
  3. Sempre arrazando nos tutorias
    Tag pra vc no post: http://portal-pattys.blogspot.com/2011/08/cuidados-basicos-p-todos-os-tipos-de.html
    Boa semana ;D
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  4. Eu coloquei no blog da minha amiga ficou super lindo.
    -
    Te convido a fazer parte de nossa equipe ,vi que você escreve super bem , se inscreva .Caso interesse na barra lateral do blog tem um anúncio escrito "Faça Parte da Equipe" clique lá.
    http://sweets2dreams.blogspot.com/

    ResponderExcluir
  5. Seu blog não precisa de mais nada , já é lindo :h:
    Beijos

    ResponderExcluir
  6. Você podia postar um tutorial ensinando como mudar a cor do plano de fundo dos comentários, deixá-los como o seu...
    Estou atrás disso e não acho em lugar nenhum o que preciso...
    ah, seguindo, segue de volta? *--*
    kissus

    http://adoleser-girls.blogspot.com/

    ResponderExcluir
  7. Ah! Eu gostei, se for aquele da foto ficou legal sim. Só que ao invés de marrom, colocaria um tom mais clarinho.

    http://tecido-doce.blogspot.com/
    http://cerejadeneve.wordpress.com/

    ResponderExcluir
  8. Obg linda e de nada =D
    Boa semana pra vc!
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  9. denada pela afiliação
    não tenho nada para flar do seu blog é só entrar nele que vc vê tudo
    bjossssss

    ResponderExcluir
  10. Ameeeeeei...
    já coloquei no meu.. rsrs
    beijos!!
    :l:

    ResponderExcluir
  11. oi eu vim flar um oi e agradecer que vc a maioria das vezes deicha um comentario no meu blog porisso eu entro no seu blog todos os dias de manhã e de noite não emporta oq acontecer eu tenho que entrar nesse blog porisso que eu endiquei o seu blog no meu blog o seu blog ja é perfeito nao preciso flar nada dele ele ja é completo..........
    beijos ass:sua fã numero1
    islandggirls-manahatori.blogspot.com

    ResponderExcluir
  12. no meu funcionou direitinho sinto muito pelo seu n ter funcionado Jackie

    ResponderExcluir
  13. Ameeeeeei , muito lindo hehe Bj http://blog-de-uma-garota-apaixonada.blogspot.com

    ResponderExcluir
  14. Bruna deixa seu Link pra min poder entrar no seu Blog Liinda

    ResponderExcluir
  15. Gabriela o Link do seu Blog não está indo Lindaa, se você trocou o link dele entra em contato cmg e deixe o novo link quero muiito visitar seu Blog

    ResponderExcluir
  16. adorei seu blog Jackie tao KAWAII tao fofo adorei so que no meu o codigo nao bate :( infelizmente

    ResponderExcluir
  17. Olha é que eu sou a unica que não consigo criar um link apesar eu não sei e ia te pedir mais fiquei com vergonha !!!!!!!!

    ResponderExcluir
  18. aiiin ameei o tutorial da rosquinha e do cupcake kawaii. ja comecei a fazer alguns, mas qdo estiverem todos prontos eu faço um post com eles
    briigada pelo tuto Jackie !!
    mesmo sendo bem facinho de fazer, eu nunca ia consegui faze sozinha kk
    bjobjoo

    http://s2juuh.blogspot.com

    ResponderExcluir
  19. Olá ,vim pedir para que siga meu novo blog http://sweets2dreams-sah.blogspot.com/ ,pois meu outro infelizmente foi hackeado ,criei um post no novo blog explicando tudo ,espero não perder você como leitora!
    http://sweets2dreams-sah.blogspot.com/

    ResponderExcluir
  20. Bruna se você deixar o link do seu BLOG posso responder seus comentários direto no seu! (:

    ResponderExcluir
  21. Eu achei que ficou fofo no seeu blog, mas no meu fica estranho =P

    Bjs,
    Giih!

    http://isjackiezzdream.blogspot.com

    ResponderExcluir
  22. Oiee ")

    Seguindo aqi!
    Parceria?
    Coloca o meu e me avisa,então colocarei o seu *.*
    Tdo lindo aqi, de verdade!!
    Beijos.
    http://pintandopapoaqui.blogspot.com/

    ResponderExcluir
  23. Oiee eu amo TOTALMENTE seu blog.Sou igual a uma fã fanatica.Vistito seu blog todo o dia,nunca perco uma postagem!Pode ser uma seguidora do meu blog?
    Já sigo o seu!E não consegui fazer o tuto:( bjinhos!
    http://garotassuperfashions.blogspot.com/

    ResponderExcluir
  24. amigaa achooo mto linda a barrinha colorida tanto lindinha que ja ate coloquei no meu blog rsrs Bjs

    ResponderExcluir
  25. PERFECT !! Mas akii... Como é que você coloca aquele botão "leia mais" ??

    Beijinhos

    ResponderExcluir
  26. AMEEEEEEEEEEI!!
    ficou lindo no meu blog, olha lá:
    http://www.potinhodeglitter.blogspot.com
    beijos

    ResponderExcluir
  27. No meu blog seu super certo! confira:
    http://marcelaseidel.blogspot.com/

    ResponderExcluir
  28. Meu blog ficou MANEIRRISIMO :D ~

    http://depois-escola.blogspot.com/


    Confira ~

    ResponderExcluir
  29. como eu coloco um estampa na barra de rolagem ??
    bjuus
    www.mariaclarasplace.blogspot.com

    ResponderExcluir
  30. Jackie mais qual seria o tutu para colocar a estampa ??

    ResponderExcluir
  31. MUITO OBRIGADA! estava morrendo pra achar esse tutorial mas nenhum funcionava... então achei esse e funcionou!!! VLW M-E-S-M-O! bjoooo
    cutegirlcute.blogspot.com

    ResponderExcluir
  32. Ainnn jack!! tô fazendo outro blog e o lay ta dando trabalho pq eu sou mto burrinha pra html :m:
    mas os seus tutos estão ajudando muitoo!!
    muito obrigada!!!
    assim que tudo der certo eu venho aqui te deixar o link pra vc conferir ok?
    pode ficar tranquila que eu vou te dar todos os créditos pelos tutos ta? bjinho!

    ResponderExcluir
  33. @@janainaricieri :j: esperandovc mandar o link pra mim conferir sua linda <3

    ResponderExcluir
  34. Eu testei e a minha barra não ficou colorida, ficou normal... Mas acho que fiz alguma coisa errada ;) bj

    www.befys.blogspot.com

    ResponderExcluir
  35. Jackie, a barra de rolagem não apareceu no meu blog . :a:

    ResponderExcluir
  36. Valeu, Jackie! Funcionou mesmo, viu? Bj

    ResponderExcluir
  37. Ficou perfeito!!!!AMEI,AMEI,AMEI.Se puder dá um visitinha no meu blog:http://robstenandbewardforever.blogspot.com

    ResponderExcluir
  38. Jackie, irei reblogar este post, mas com créditos e o mais diferente possível na escrita da explicação!

    ResponderExcluir
  39. Eu coloquei só que a barrinha ficou branca e nao da cor que eu escolhi...Mas por mim está tudo bem...Bjus Jackie...Sempre com os tuto perfeitos...

    >the-cupcake-delicious.blogspot.com.br<

    ResponderExcluir
  40. Respostas
    1. É só substituir esse último código por esse:

      {
      scrollbar-face-color:#9B30FF;
      scrollbar-highlight-color:#9B30FF;
      scrollbar-3dlight-color:#000000;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#9B30FF;
      scrollbar-arrow-color:#000000;
      scrollbar-track-color:#000000;
      }
      ::-webkit-scrollbar {width: 12px; height: 4px; background: #000000; }
      ::-webkit-scrollbar-thumb { background: #9B30FF; }

      Excluir
  41. não estou conseguindo deixar de cor diferente, nem colar URL do background... sou leiga demais em HTML. :(

    Se quiser me responder no e-mail eu ficaria muito feliz: blogalemdemim@gmail.com

    ResponderExcluir
    Respostas
    1. Hooy guria
      - é só ir na tabela de cores que deixei o link no post.

      - Escolhe a cor q vc quer usar

      - copia o 2° código que irá estar ao lado da cor

      - e cola no local indicado do tutorial

      não tem segredo, espero ter ajudado, beijus!

      p.s não respondi no e-mail pq tô com preguiça de fazer o login :c huahauha

      Excluir
  42. Oii ameii seu blog
    sei que não vai querer mais não custa perguntar né
    quer ser afiliada do meu blog?? >> http://kamilenopaisdasmaravilhas.blogspot.com.br/

    ResponderExcluir
  43. Coloquei no meu blog , super fashion *-*
    http://maniadeallstar.blogspot.com.br/

    ResponderExcluir
  44. Mto Obrigada msm eu tô pulando de alegria só e conseguir isso pq eu nunca consigo essas coisas de códigos e tal,enfim eu te agradeço mto!

    ResponderExcluir
  45. Obrigada,só alterei para a cor para Roxo!

    ResponderExcluir
  46. Oi linda td bem eu n consegui mudar o meu URL do background
    n sei o q e isso kkkkk Obrigada

    ResponderExcluir
  47. Oi Jackie!
    Adorei o tuto, já consegui botar a cor direitinho, mas pelo amor de Deus(Sou desatualizada), o que é URL do background? O que é pra botar ali?
    Beijo!

    ResponderExcluir
  48. A minha ficou roxa, eu tinha colocado cor verde. Tem alguma coisa dando errado. Vou tentar de novo.
    Beijo!

    ResponderExcluir
  49. Não consegui por , pois eu coloco o código não aparece nada ! Gostaria que me ajudasse ... Como que aparece o negocio destacado de vermelho ... " poxa vida " não consegui me ajuda pvfr !

    ResponderExcluir
  50. Meu Blog Favorito Me Ajuda Muuuuiiiitttooooo http://criatividadesnamoda.blogspot.com.br/

    ResponderExcluir
  51. Me ajuda, aqui não tem o '' ]]> ''

    ResponderExcluir

.