5 de fev. de 2012

Barra de rolagem personalizada e com efeito hover

Tumblr_lyw8ywhpc91qdr0s2o1_500_large


Oi amores, hoje eu vim ensinar pra você como fazer sua barra de rolagem personalizada e ainda com efeito hover ! Eu não vi esse tutorial em nenhum blog, então esse tutorial pra mim ainda é exclusivo. Não sei se vocês já sabem esse tutorial, mas se souberem ok, pois isso pra mim é novidade kk, desculpem por eu não postar ontem, estava meio que ocupada. Voltando o tutorial, para ver como sua barra de rolagem vai ficar, só ir no meu blog de encomendas, para ir no gs encomendas só clicar aqui, e passe o mouse sore a barra de rolagem, não aparecer uma imagem? Então, é isso que eu vou ensinar ^^
Vá em Design> Editar HTML e procure por:
]]></b:skin>
E logo acima cole:
html::-webkit-scrollbar {width:22; height:auto;background: #D3D3D3;}
html::-webkit-scrollbar-corner { background: #D3D3D3;}
html::-webkit-scrollbar-button:vertical {height:1px;display:block;}
html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}
html::-webkit-scrollbar-thumb:vertical {background: #DDA0DD;border: 1px solid  #D3D3D3;border-right:none;-webkit-border-radius: 8px;}
html::-webkit-scrollbar-thumb:horizontal {background: #DDA0DD;border: 1px solid #D3D3D3;border-bottom;}
html::-webkit-scrollbar-thumb  {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);}
html::-webkit-scrollbar-thumb:hover {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);border: 1px solid  #A2A2A2;}
html::-webkit-scrollbar-track-piece {background: none;}
html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}
html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}
Oque está em negrito é a cor do fundo sem o mouse por cima, o que está em sublinhado a cor da barra, e oque está em itálico é a imagem hover, se você quiser substituir por uma cor, só retirar o -image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp) por : #códigodacor e o que está em roxo é a borda da barrinha e a do fundo. Bom, visualize, se estiver tudo certo, salve. Bom, espero que tenham entendido o tutorial. Até a próxima ^^

16 comentários:

  1. hum legal o tuto
    seguindo segue de volta?
    http://blogtudodesbloqueado.blogspot.com/

    ResponderExcluir
  2. oi flor adorei o tuto mesmos eu fiz mas ñ combinou com o meu blog
    eu estou seguindo
    beijos
    http://meumundopiink.blogspot.com/

    ResponderExcluir
  3. Oii kerida!Lindoo lindooo seu blog *-* Ameiii e ja vireii seguidora.
    Adoreii o tutorial, bem legal.
    Bjs!

    grazigrazieli.blogspot.com

    ResponderExcluir
  4. Tuto diferente e bem explicado.
    Mas acho que não combina no meu blog :)
    Beijos, Danielle, onthefame.tk ♥

    ResponderExcluir
  5. aaaaain, adorei o seu blog e já estou seguindo >.<
    E a propósito, o tutorial fica muito legal *-*
    bjos :*
    www.mini-fofoquinhas.blogspot.com

    ResponderExcluir
  6. muito bom o tutu tô precisando muda o designe do blog! Obrigada por seguir meu blog! Ja to seguindo o seu SUPER seguindo muito fofo aqui!
    http://kelly-club.blogspot.com

    ResponderExcluir
  7. Adorei a dica...

    adorei seu blog tbm.Voltarei mais vezes;

    beijos da vick !!
    douceelamour.blogspot.com

    ResponderExcluir
  8. Eu acho legal, mas apesar de tudo eu não uso no meu blog k
    bjjos
    blogloucamistura.blogspot.com

    ResponderExcluir
  9. Oi flor... aceita afiliação né?? entra em contato comigo lá : s2rita.blogspot.com/p/contato.html << beijooooooos

    ResponderExcluir

Regras:

* Não nos critique, só fale o que você não gostou.
* Deixe a url do seu blog para que possamos visitá-lo.
* Não comente assim ''Seguindo, segue de volta?'' se não eu não publicarei, mas responderei.
* Não é possível comentar no modo anônimo.


Obrigada por comentar :)