Personalizando a barra de rolagem Com CSS

► +A +/- -A
Olá amigos leitores, nesta post ensinarei um tutorial bastante legal, nele ensinarei como mudar a barra de rolagem do seu blog por outra bem bonita, e além de tudo com CSS.


Também já ensinei aqui no meu blog como mudar a barra de rolagem do blogger por outra.
Se você quiser ela também e muito elegante.
Veja o link abaixo:




Mas, vamos começar o tutorial:


Começando o tutorial:
1. Acesse o painel do seu blog e clique no Guia Modelo.
2. Depois disso, clique no Botão "Editar HTML".
3. Agora segure as teclas CTRL+F e procure por:


]]></b:skin>


4. E acima da tag citada acima cole o seguinte código





/* ---------------- Barra de rolagem Google Chrome---------------- */
::-webkit-scrollbar {
width: 15px; <!-- largura da barra de rolagem -->
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #aebcbf; <!-- Cor do fundo da barra de rolagem -->
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #000; <!-- Cor da barra de rolagem -->
border-radius: 10px; <!-- Arredondamento da barra de rolagem -->
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px; <!-- Largura da barra de rolagem na horizontal-->
background-color: #FFA500; <!- cor da barra de rolagem na horizontal-->
}



Pronto agora é só aproveitar a sua nova barra de rolagem!
Atenção: Só testei no Google Chrome
► Postagens Relacionadas:

3 Comentários

Willian salomão disse...

mt bom, vlw mesmo!

28 de novembro de 2012 13:58
NADA disse...

obg! mano

11 de novembro de 2013 15:33
lia/fpolis disse...

E como fazer voltar ao azul a barra de rolagem vertical e horizontal do chrome? sem mexer em nada passou de azul para cinza, até a opção selecionar para copiar/colar ficou um azul mais claro, queria o azulão de novo alguém sabe?

9 de janeiro de 2014 20:16

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!