Tutorial:Barra de rolagem colorida

Tumblr_lochf2wjxi1qai354o1_500_large 
Oiee pessoas lindas e maravilhosas*--*
Estou muuuito feliz pelos 59 seguidores,serio mesmo,muito obrigada a todos vocês*--*
Desculpe não ter postado nos ultimos dias é que eu estava meio ocupada fazendo o layout do blog Liso e Enrolado,se quiseram dar uma passadinha lá pra ver como ficou é só clicar aqui !
Bom,eu estou esperando a resposta do blog Material Teen para ver se eu posso reblogar os seus cursores,pois a Tifhi do blog Just Girls,que eu super recomendo,me pediu,então enquanto não chega a resposta,hoje eu vou postar pra vocês como colocar barra colorida,tipo a minha ou do modo mais simples,muito obrigado ao blog Peace Love pelo tutorial:

Barra de rolagem igual a minha:
Vá Em Design> Editar HTML E Procure Por:
]]></b:skin>
E Acima Dele Cole Este Código:

::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;height:50px;
border: 2px solid #fff;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 #bebdbd;
-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(FUNDO DA BARRA DE ROLAGEM) 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;}

Vamos Personalizar:
(1): O Código Destacado de ROXO É A Cor Da Barra De Rolagem.
(2): o Código Destacado De Vermelho É A Borda Da Barra De Rolagem.
(3): O Código Destacado De Azul É O Plano De Fundo Da Barra De Rolagem.


Barra de rolagem mais simples:
 
Vá Em Design> Editar HTML E Procure Por:
]]></b:skin>
E Acima Dele Cole Este Código:
{
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; }

Vamos Personalizar:
Barra De Rolagem: #9B30FF
Plano De Fundo: #000000


Espero que dê certo com vocês.
Espero que tenham gostado.

43 comentários:

  1. fico muito show esse tuto vou tentar colocar TENTAR né?acho qe da sim ja consigo colocar algumas coisas rsrsrsrs beijos flor.

    ResponderExcluir
  2. Legaal!
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  3. ameei ameei o tutoriial perfeito e bem util :D
    http://portaldisturbiablogger.blogspot.com/

    ResponderExcluir
  4. acto parceriia sim amr e so me linkar e me avisar que eu faço o msm S2
    http://portaldisturbiablogger.blogspot.com/

    ResponderExcluir
  5. Aiin gente brigada pelos comentários*--*
    Lukaas já te linkei*-*
    Beijos Gabriela

    ResponderExcluir
  6. flor qeria pedir pra vc quando tiver tempo fazer um layout completo se não puder é só dizer se cobra alguma coisa.o cabeçalho e o link-me tão lindo mas qeria mudar o blog mudar algumas coisinhas.vc pode?beijos

    ResponderExcluir
  7. a tem um novo post no blog 2 na verdade um homenageando os blogs qe sigo e outro qe é um novo post.

    ResponderExcluir
  8. Oiee Tifhi,brigada pelos coemntários,brigada por me indicar e quanto ao layout,você é a segunda da minha lista*-*
    Beijos Gabriela

    ResponderExcluir
  9. Aiin brigada lindo,também já estou seguindo*--*

    ResponderExcluir
  10. amei de mais o tuto explicadiissimo

    Que blog mais lindo *o* favoritos* aceita parceria/afiliação?? seria uma honra ;)




    http://only-girls2.blogspot.com/

    ResponderExcluir
  11. Aiin flor,brigada,já estou seguindo o seu blog e podemos ser parceiras viu?!
    Beijos Gabriela

    ResponderExcluir
  12. prontinho flor tá nas parcerias :D obriigada por acc Beeijus amei de mais aqui viu

    ResponderExcluir
  13. oi GABRIELA me avisa quando puder fazer o lay ta?
    e qeria saber vc cobra pra fazer o lay?:o cabeçalho e o link-me vc não cobro mas esse eu não sei.e precisa de senha???

    ResponderExcluir
  14. a só mais uma coisa meu pai vai formatar o pc dele qe é onde ta os cabeçalhos e link-mes guardados mas eu prometo não perder eles meu pai entende de pc ele fez cursos e mando eu criar uma pasta com o meu nome e colocar as imagens qe eu qeria guardar la então guardei só to preocupada de qualquer forma se perder não sei se o hotmail deleta as mensagens lidas mais ta la ainda.beijos

    ResponderExcluir
  15. to anotando o endereço de todos blogs qe sigo pq vou perder todos qe tinha salvo na barra de favoritos o seu tambem.

    ResponderExcluir
  16. :a adorei o blog!Kkkkkkkkkkk:c!Showww:s !Seguindo,segue de volta ok?:d:

    music-musicaedemais.blogspot.com

    ResponderExcluir
  17. Oi flooor! :o obrigada por seguir viu? Eu aceito sim parceria, é só você colocar o banner do meu blog aqui e me avisar para que eu possa fazer o mesmo, ok? Beijos

    www.ponhaglitter.blogspot.com

    ResponderExcluir
  18. só mais uma coisa eu preciso de um lay pro meu blog e de um cab pro blog da minha mãe qe eu to criando.ta??
    caso vc qeira cobrar por isso posso te pagar só em uma semana isso dependendo de quanto vc cobrar ta flor??????beijos

    ResponderExcluir
  19. ta me decidi vo criar outro blog preciso de um cab e 2 lay.vc pode cobrar se achar qe é muito pq eu acho e se vc cobrar me diz o preço pra mim ver.ta??eu vou criar outro blog mas não vou abandonar o jg ta?

    ResponderExcluir
  20. esquece esses coments amanha falo com vc rsrsrsr

    ResponderExcluir
  21. consegi colocar sozinha um cursor ehhhhhhhbah
    ta bem fofinho vc se quiser pode botar igual o tuto pros outros né? oh bom é qe eu aprendi sozinha peguei uma imagem e copiei o link colei naquele negocio deu.ta fofinho passa la e olha.
    e esquece os coments de cima só preciso do lay do blog ta?rssrrs

    ResponderExcluir
  22. Oi linda, eu vim pedir um favor! Meu blog está participando de um concurso, vota nele? Se você ainda não tiver votado em nenhum é claro!
    link:
    http://ianapaulinhaaaa.blogspot.com/2011/11/comecaram-as-votacoes-corre.html

    Quando você entrar no site vai aparecer uma lista de blogs, é só procurar pelo "Ponha Glitter" e votar! Beijos :)
    Agradeço desde já!

    ResponderExcluir
  23. Ok flor, seu banner já está lá na aba de parcerias. Beijos (:

    ResponderExcluir
  24. flor consegui colocar um cursor ehh e essa barra ai.ja respondi seu e-mail.ja te dei a senha por la pq não da pra da assim livre aqui no blog.olha vc não precisa mudar o cabeçalho nem o lin-me só qero o resto tambem não precisa mudar o cursor.a bara se quiser mdua fico meio estranho.beijos a participa do primeiro concurso do blog. "blog + pink" não tem nada a ver com ser rosa ta?

    ResponderExcluir
  25. flor ainda coloquei um tuto la de como colocar cursore vc ja deve saber mais tem um monte fofos vai da uma olhaidnha.

    ResponderExcluir
  26. Oi Gabi, tudo bem flor. entãao. eu adoro seu blog. um #luxoo a parte .
    estou começando um, não é lá essas coisas mas por enquanto dá pro gasto kk' . viiu, me ajuda a divulgar ? Beeijão .

    http://www.lacosemaislacos.blogspot.com/

    ResponderExcluir
  27. flor sei qe e pedir d+ + eu preciso de um lay completo com cabeçalho etc...pro meu novo blog onde vou postar historias mas ele tipo tem a ver como jg qe nem o haus of teen encomendas.
    e um lay basico como explqiuei por e-mail pro jg.ta?

    ResponderExcluir
  28. Vi sim linda,ficou lindo*--*
    Beijos Gabriela

    ResponderExcluir
  29. amei sue blog flor
    beijos
    by:http://lolamantovani.blogspot.com/
    http://coisinhasdalola.blogspot.com/

    ResponderExcluir
  30. Que legal o tutorial!!!
    Parabéns pelo blog, amei e estou seguindo!!! :)
    Convido a seguir o meu tb!!!Adoraria te ver por lá!!!

    Obs: O blog anda meio doido e as vezes a foto de seguidora não aparece, qualquer coisa
    me avisa que eu volto flor!!! ;)

    http://jullycolorsplus.blogspot.com/
    (tem novos sorteios rolando lá, participa!!!!)
    @JullyColors

    Bjokas

    ResponderExcluir
  31. olá conheça minhas criações http://signoritaccessori.blogspot.com
    besos

    ResponderExcluir
  32. Flor, que lindo seu blog, parabéns!

    Bjnhos,

    http://coisas-de-diva.blogspot.com/

    ResponderExcluir
  33. Estava na minha área de transferência e coloquei o blog das amigas manu e duda no lugar do meu hsuahsuahsus.
    O meu é:

    http://encantobylu.blogspot.com

    ResponderExcluir
  34. Oi linda! Sou eu de novo! Mas, agora to pedindo afiliação, aceita? Espero que sim, bjuss!

    www.grimacing.blogspot.com

    ResponderExcluir
  35. Oi linda! Já fiz parcerias com vc, agora queria mto fzr afiliação. Aceita? Bjus!

    www.meujeitoblog.blogspot.com

    ResponderExcluir
  36. oie,
    gostei do seu blog,visite o meu e se gostar siga.
    http://saltoaltose@blogspot.com
    bjo
    livia

    ResponderExcluir
  37. Flor, amei o mimo, já coloquei lá, depois criarei uma aba para eles.
    Bjnhos,

    http://encantobylu.blogspot.com

    ResponderExcluir
  38. JA ESTOU SEGUINDO
    ME AJUDA E SEGUE DE VOLTA
    AH E PARTICIPA DA LISTA DE BLOGS PARCEIROS

    WWW.MAKEPOPULAR.BLOGSPOT.COM

    ResponderExcluir
  39. AMEI, PARABÉÉÉÉÉÉÉÉÉÉÉÉNSSSSSSSSSSSS PELO TUTORIAL. EU SIMPLESMENTE APROVO http://disneyprogramacao.blogspot.com/

    ResponderExcluir
  40. vi isso em outro blog COMPLETAMENTE IGUAL mais foi no ano passado, puis no favoritos

    ResponderExcluir
  41. Anonimo,você deve ter visto no blog Peace Love que eu creditei ali no começo da postagem.

    ResponderExcluir

Muito obrigada pela visita*--*
Siga e deixa o seu link que seguirei de volta^^
Ah e me sigam pelo Twitter também,sigo todos de volta.
Twitter:@heeysmile
Volte sempre!
Beijoos Gabriela