Personalizar a Barra de Rolagem

Os detalhes na hora de personalizar um blog são importantes para impressionar seus leitores. A barra de rolagem está em todo lugar, os leitores usam ela com frequência para se movimentar dentro do seu blog ou para ver o quão longe do final da postagem eles estão. Por muitas vezes, a barra de rolagem dos navegadores podem não combinar com o design do seu blog, e personalizá-la pode dar um toque especial ao seu blog!
Aprenda como personalizá-la seguindo os passos a seguir.

1 Vá em Tema > Editar HTML > Clique na caixa de códigos e aperte Ctrl + F ou F3 > Procure por ]]></b:skin> > Cole o código a seguir acima:
/* Parte móvel */ ::-webkit-scrollbar-thumb { background: #000; } /* Parte fixa */ ::-webkit-scrollbar { width: 10px; background: #fff; } 2 Faça as alterações necessárias.

3 Salve.

Para personalizar a barra de rolagem de algum elemento em específico, é possível adicionar a classe/id/tipo do elemento antes dos ::. No exemplo abaixo, apenas a barra de rolagem do elemento blockquote é alterada:
blockquote::-webkit-scrollbar-thumb { /* css */ } blockquote::-webkit-scrollbar { /* css */ }

Comentários

  1. Anônimo18/11/13

    Ótimo tutorial, acho super útil! Boa sorte nas provas >w<

    Panther Pink and Blue

    ResponderExcluir
  2. Eu realmente adorei o tutorial, acho super fofo a barra de rolagem em uma cor diferente, vou tentar colocar no meu heuheuheu kkkk'
    http://colorfulunicornlu.blogspot.com.br/

    ResponderExcluir
  3. Adorei o tutorial , espero fazer no meu próximo lay.
    Se puder lá blog ficarei muito feliz.
    Beijos Carlos ;)
    http://carlosjcarvalho.blogspot.com.br/

    ResponderExcluir
  4. Anônimo19/11/13

    Super legal o tuto! adorei a vinda do blog♥
    Retribuí?.. volto aqui de novo •
    www.rockteen92.blogspot.com.br

    ResponderExcluir

Postar um comentário

Fique à vontade para interagir e tirar dúvidas.
Peça tutoriais em Contato
Você pode usar as tags negrito (<b>), itálico (<i>) e links (<a>)
Comente com o link do seu blog para que eu possa visitá-lo ♪(^∇^*)