Personalizando a barra de rolagem

Olá pessoal ! Nescauh de novo aqui !

Espero que estejam gostando dos tutoriais,pois venho dar uma dica muito legal para personalizar o seu blog !
Hoje veremos como Personalizar a Barra de rolagem do blog !

Para começar vá em Modelo>Editar HTML>

Em seguida aperte CTRL+F e procure por /*Header  ,logo em seguida copie o código e cole em cima de /*Header

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

Seu HTML ficará parecido com esse:

Entendendo o Código

Em  :-webkit-scrollbar { width: 10px; height: 10px; }

Width: 10px; É a largura da barra, mude o 10px; para a largura que você quer.
Height: 10px; É a altura da barra,mude 0 10px; para a altura que você quer.

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

Background-color rgba(255,255,255,0.4); Você muda a cor que quer do ícone da barra,mas a cor deve ser em hexadecimal (números)

-webkit-border-radius: 10px; Aqui você muda a arredondação da barra,trocando 10px; para quanto quiser.

Em -webkit-scrollbar-track-piece { background-color: rgb(0,74,174); }

background-color: rgb(0,74,174); Aqui você muda o fundo da barra,trocando os números dentro dos parentes por números hexadecimais !

Quando terminar,visualize , se estiver tudo certo salve.
Qualquer dúvida posta nos comentários, até mais !