Blogger: Dando estilo a barra de rolagem com CSS3

   Olá caros blogueiros, hoje estamos com mais um tutorial voltado ao CSS3. Hoje iremos aprender a como mudar a scrollbar exibida no seu blog, ou seja, dando umas modificadas no visual da barra de rolagem exposta no seu blog.

Lembrete

  Iremos modificar o HTML de seu site, então é recomendado que você faça um backup do seu template e/ou criar um blog de testes


   Enfim, já falamos demais, agora vamos a ação:

Dando estilo a sua barra de rolagem

1. Acesse o Blogger e faça seu login;


2. Após entre na seção Modelo e clique em Editar HTML 

Painel > Mais Opções > Modelo > Editar HTML

3. Agora procure pelo seguinte atributo:


]]></b:skin>

4. Agora, abaixo dele adicione o seguinte código:




/* -----Scrollbar Modificada ----- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-track-piece {
background-color: #transparent;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #eeeeee;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #eeeeeee;
-webkit-border-radius: 4px;
}

Obs.: Lembre-se de modificar os destaques para deixar de acordo com o seu site o estilo.