10 de jul. de 2012

Barra de rolagem em 2 formas



Hooy minhas balinhas de caramelo, como vão? Eu vou na mesma de sempre, aquela chatisse, mais isso não me impede de postar *----*. Então, que tal deixar a barra de rolagem do seu blog tipo FOFINHA? Legal né! Muitos blogs usam a barra de rolagem personalizada e eu vou ensinar vocês, mais de duas formas: a redonda e a quadrada. Legal né! Vamos ao tutorial hoje, dedicado à minha linda leitora e fá do blog Janis Evely, que todo dia visita o blog e que me deixa feliz. Vamos lá:


Bom, primeiro a redonda, que eu acho a mais fofa:

Vá em Design > Editar HTML > Dê um Ctrl + F e procure por:

]]></b:skin>

Acima dele, cole isso:

::-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;}


Explicação:

* O que está roxo é a cor da barra de rolagem.
* O que está vermelho é a borda da barra de rolagem.
* O que está azul é o plano de fundo da barra, você precisa colocar a URL de algum background, no final do post colocarei alguns.

                   

Agora vou ensinar a quadrada, que não é tão fofa:

Vá em Design > Editar HTML > Dê um Ctrl + F e procure:

]]></b:skin>

E acima dele, cole esse 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; }

Explicando:

* O que está roxo é a cor da barra de rolagem.
* O que está azul é a cor do fundo.

Bom, aqui estão alguns backgrounds pra vocês colocarem na redonda, porque na quadrada não precisa:

             

Por hoje é isso gente, beijooos!!

8 comentários:

  1. Ai brigadinho meu brigadeirinho, estou feliz pera decaração *v* ... Mais um problema aconteceu eu estou com do nos olhos por causa do meu notebook, mais eu promrto que guando poder verei o seu blog todinho ok docinho atéé....

    ResponderExcluir
    Respostas
    1. Eu minha flor, que pena viu, melhoras pra ti. Olha, obrigado pela atenção com o blog, você e a Rarissa são minhas fãs de coração, adoro muito vocês sz! Quando melhorar visita o blog ein!! Beijos minha flor!!

      Excluir
  2. Respostas
    1. Eii amor, olha eu ando dando umas configuradas no HTML da barra porque ela realmente está dando erro. Quando eu arrumar te aviso, oks! :*

      Excluir
  3. Eeu amei *-* ficou muito fofo, coloquei a quadrada, era o que eu estava procurando, mais só achava a redonda :/
    Mas agora eu consegui graças a você :3 Thanks amre :D
    garotasvirtuaisvg.blogspot.com.br/

    ResponderExcluir
  4. Lindo seu blog, primeira vez aqui... perfeito..

    beijos..

    se quiser visitar meu blog..
    maniaafeminina.blogs..*

    ResponderExcluir
  5. Nuss'
    Super amei esse post'
    Testei no blg de testes e ficou liindo dmz
    Eu vou coolocar no meu próximo laay, vai ficar Shooooow *-----*
    http://comentariosde1garotaqualquer.blogspot.com.br/

    ResponderExcluir
  6. Nossa vc me ajudo muito tinha um pedio pra template e pediram pra colocar a barra , e não sabia como , vlw

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.