Barras de rolagem personalizadas ~ 1

(www)

Olá Fulanos :) Hoje vou ensinar vocês a fazerem/colocarem uma barra de rolagem personalizada no seu blog ^^ Existem vários tipos e hoje vou ensinar um deles para vocês:

Você pode personaliza-las como quiser e até deixar em um estilo mais redondo :) Quer aprender como fazer? Clique em leia mais !o!

Vamos lá :)  ~tutorial em encontrado no blog Bad Repution~

1. Colocando a barra de rolagem:

• Vá em Modelo  Editar HTML (MUITO IMPORTANTE: copie o HTML atual, pois caso houver algum problema é só trocá-lo pelo novo);

•  Aperte Ctrl+F e procure por ]]></b:skin>;

• Cole o código a baixo antes dele:

/*** 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*/
}

2. Personalizando a barra de rolagem:

• Trocando as cores: Bom, essa parte é bem simples, acho que quase todo mundo sabe fazer, mas para quem não sabe    é só trocar o código depois de  background: # por o código da cor desejada (tabela de cores aqui).
• Colocando imagem de fundo em vez de cor: Estão vendo onde está escrito: background: # ou background-color:# + o código da cor? É só trocar por background: url() e colocar entre os parenteses o URL da sua imagem ^^, simples não é?
• Bordas: Para mudar o tipo de borda é só trocar o código por:

border: 2px outset #ff5e9f

border: 3px inset #FFFF99

border: 4px ridge #46c74e

border: 3px groove #eded58

border: 4px double #FF0000

border: 1px solid #ed574c

border: 2px dashed #6a55ed

border: 2px dotted #919191

(bordas encontradas nesse tutorial do Bad Repution)

• Largura: Só mudar a parte em verde;
• Deixar a barra quadrada: É só diminuir ou apagar os pxs das partes em laranja ^^.

No próximo turorial vou ensinar vocês a fazer esse tipo de barra:

Beijos, até mais ;)