Tutorial:Barra de rolagem colorida

 

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.