Barra de Rolagem (imagem / cor)

Oie xuxuzinhos da minha vida  bah hoje eu descobri que meu pai é mais tri do que eu pensava ^-^ o véio além de curtir Raul Seixas , Cazuza e Johnny Cash que eu já achava triiii *-* descobri que ele gosta de Jaspion e ontem peguei ele assistindo Pokémon rsrs \o/  ele ainda começou a usar um all star vermelho que era do meu irmão *-* bah até me emocionei rsrs vou ver se carrego ele pro AnimeXtreme em Junho!! 
(detalhe meu xuxuzinho tem 60 anos já)
tah tah tah..vou postar um tuto "barbada"..eu vou postar  como deixar  a barra de rolagem colorida e como  usar background ao invés de cor 


Vá em design > Editar HTML > Aperte Ctrl+F e procure por ]]></b:skin>
Cole o código acima de ]]></b:skin>

/*** 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*/
height:50px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** 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*/
height:10px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
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*/
}

 Se quiser colocar background ao invés de cor substitua background: #000;  por background: url(URL DA IMAGEM);

Se quiser a barra móvel mais quadrada apague ou diminua os px de:
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 Personalize do jeito que quiser :)

 Post com os estilos de bordas veja aqui
 Tabela de cores aqui

*Código do Cherry Bomb eu só acrescentei "background: url(URL DA IMAGEM); " na barra que eu uso :)

17 comentários:

  1. Finalmente oque eu pedir rsrs te amo minha divaah s2

    ResponderExcluir
  2. Olá,
    Parabéns pelo blog! Estou seguindo.
    Segue lá também..

    http://www.estanteseletiva.com/

    ResponderExcluir
  3. Aiin meu deus ! O seu blog é uma hiper fofura, amor *_*
    Adorei muito a capa, o fundo tá mega lindo ^-^ , adorei mesmooo ! rsrs
    seu blog é um amor :)
    adorei as postagens , o visu tá bacana :)
    Seguindo seu blog flr,
    Segue lá?
    http://bvii.blogspot.com.br
    brigadiinha :D

    ResponderExcluir
  4. Que lindo! Vou usar no meu proximo lay.
    Fofa, tem sorteio rolando lá no blog. Participa?

    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  5. oooi linda, parabéns por esse blog lindo, que eu amei, eu não conhecia, agora que conheci,vou sempre está por aqui, pois amei tudo aqui, o layout é super foofo, suas postagens são mt boas, percebi que criatividade não falta a você né?! não mesmo, todo aqui é lindo demais.. Parabéns mais uma vez linda, por se dedicar ao máximo para seus leitores, vou seguir aqui :D
    Da uma passadinha lá no meu blog, se gostar, segue por favor ;*

    Beijos

    http://www.blogmeninamulher.com/

    ResponderExcluir
    Respostas
    1. aiin brigaduu *-* vou dar uma passadinha to teu blog xuxu

      Excluir
  6. Oi. Selinho para você.
    Bjs
    http://littlebadgirlcute.blogspot.pt/

    ResponderExcluir
  7. Esse tutorial é mto bom, já tinha feito ele no blog, deixa o blog bem diferente.. ^^

    www.ecleticus.com

    ResponderExcluir
  8. Gostei muito do tuto....
    O blog é muito kawaii!!
    É verdade!E o layout está lindo!
    Kissus~
    Anime Tokio

    ResponderExcluir
  9. Oi muito lindo seu blog!
    Tão fofinho >.< - seguindo

    http://menina-medrosa.blogspot.com.br/

    ResponderExcluir
  10. Amei o tutorial parabéns, que blogger mais perfeito em ? Da uma passadinha lá no meu ? http://cantinhodasmontagens.blogspot.com.br/ bjoos

    ResponderExcluir