Como Personalizar a Barra de Rolagem

Hoje, irei ensinar a como personalizar ou trocar de cor a barra de rolagem de seu blog. Se não sabe o que é, veja:

Lembrando que só funciona em Chrome, Safari e outros browsers que usam WebKit.


1. Adicionando o Bloco de Código

Primeiro, vá até seu blog, e então em Modelo e em Editar HTML. Veja (novo blogger):

Então, vá até antes da palavra /* Header, algo assim. Veja:

Bem, agora você adiciona este bloco de código acima disto:

::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display: none;}::-webkit-scrollbar-track-piece { background-color: rgb(0,74,174);}::-webkit-scrollbar-thumb:vertical { background-color: rgba(255,255,255,0.4); -webkit-border-radius: 10px;}

2. Editando 1

Primeiro, a parte ::-webkit-scrollbar { width: 10px; height: 10px; }

Bom, no width: 10px; você muda o 10px para a largura que você quer a barra de rolagem. Já em height, mude o 10px para a altura. Isso não muda muito.

3. Editando 2

Agora a parte ::-webkit-scrollbar-button:start:decrement,::-webkit scrollbar-button:end:increment { display: none; }

Você não deve mudar nada nisto. NADA.

4. Editando 3

Já a parte ::-webkit-scrollbar-thumb:vertical { background-color: rgba(255,255,255,0.4); -webkit-border-radius: 10px; }

Essa parte é a peça que você rola a página. Veja:

Em background-color: rgba(255,255,255,0.4); você muda para uma cor, como #000000. A cor deve ser hexadecimal (#números), e ver a cor em um Color Picker por aí.

Já em -webkit-border-radius: 10px; você muda a arredondação da peça que rola. Você pode colocar qualquer número, de 0px; á 99px; ou qualquer coisa por aí.

5. Editando 4

Essa é a parte do fundo onde a peça de rolagem rola: -webkit-scrollbar-track-piece { background-color: rgb(0,74,174); }. Veja:

Nisso você muda o background-color para uma cor de sua preferência, o mesmo do acima. Espero que tenham aprendido, até mais.

~Clock Tow