.:Matheus com H│Blog: Personalizando a barra de rolagem

23 abril 2012

Personalizando a barra de rolagem

Trouxe um tutorial para deixar a barra de rolagem colorida, assim como o do Mentes Velhas. Foi tirado do blog Meia noite e quinze, mas nesse tutorial só ensina como mudar a barra vertical, e a horizontal fica padrão. Mas vou lhes ensinar a mudar as duas.

Vá em Designe, Editar HTML e ache o código ]]></b:skin> (Ctrl +f)

Acima desse código, coloque o seguinte:

::-webkit-scrollbar-thumb:vertical {
background: #000000;

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:#000000; height:10px;
border: 1px solid #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: #e7e0c6 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;}



Entendendo o código:

A parte em VERDE, é a cor da barra. , é a cor da borda da barra para
A parte assim, é a cor da borda da barra
Se você quiser que a barra VERTICAL fique sem bordas arredondas, tire a parte em NEGRITO
Se quiser que a linha fique pontilhada ------ mude solid para dashed
Cor cor da parte em que fica a barra
Atenção à parte sublinhada, ela mostra onde é HORIZONTAL e VERTICAL!
Para visitar a tabela de cores!


Qualquer dúvida, comente.


Chegamos aos tão sonhados 60 seguidores. Obrigado a todos vocês. 1500 visualizações 

14 comentários:

Desconstruindo as palavras disse...

Olhaa de cara nova!! Parabéns ficou muito bonito. E amei o tutorial *---*

http://desconstruindoaspalavras.blogspot.com.br/

Desconstruindo as palavras disse...

Olhaa de cara nova!! Parabéns ficou muito bonito. E amei o tutorial *---*

http://desconstruindoaspalavras.blogspot.com.br/

Larissa disse...

Adora mudar o lay do blog não é mesmo? rs
Obrigada pela visita. Te espero lá novamente. Ah, tenha uma ótima semana. Beijos. :*

http://vitaminadepimenta.blogspot.com/
@LariCrazy_

Isabela Godoy disse...

Adorei o tutorial! Ps: seu blog tá muito lindo, parabéns pela meta

Delírios de Garota

Vida de Garota disse...

Amei o tutu, super simples e lindo. Vou sair o link aqui e usar no meu proximo lay.

Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com.br

Reality of girls disse...

OIe eu sou do blog www.meninasrealidade.blogspot.com ok eu vou por la uma nova parceria ok?=D Bju

Senhor do Século disse...

Adoro sair mechendo no template, realmente sensacional!


www.senhordoseculo.com

Beauty 4 Men

Ana Carolina ∞ disse...

Já tentei fazer esse tutorial de vários jeitos, procurei em vários blogs diferentes mas nunca deu certo.

Kisses ♥ Garota Inocente

Ana Carolina ∞ disse...

Ahh eu uso o Chrome mesmo, mas nunca deu certo!

Kisses ♥ Garota Inocente

Larissa disse...

eu ESTAVA mexendo. Morro de preguiça, então desisti kkkk eu conhecia sim, eles 'salvam' a minha vida direto. :D
o filmé é bom, mas quem leu o livro fica indignado com as mudanças. E sim, é um livro que não agrada a muitos, afinal, o estilo do autor é 'chocar' através de fatos históricos, que podem ou não ser mitos, mas que não deixam de ser polêmicos. Porém, eu recomendo. É só ter mente aberta, gostar de história e ter bastante atenção nos detalhes. Beijos.

http://vitaminadepimenta.blogspot.com.br
@LariCrazy_

Isabela disse...

Oi Matheus! Obrigada pela visita, volte sempre :D

Delírios de Garota

Vida de Garota disse...

Parabéns, pelos 60 seguidores e 1500 visualizações, seu blog merece. Que seu blog cresça mais e mais.

Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com.br

Mariah Lieban disse...

Adorei a dica!! Obrigada!
Beijinhos :*
conversasdochadascinco.blogspot.com

Michele B. disse...

oi,
adorei a dica
curti seu blog no facebook

http://lostgirlygirl.blogspot.com.br/

@lostgirlygirl

bjos