Modificando sua barra de rolagem com CSS3 em blogs do Blogger

Compartilhar:
Hoje em dia, como sempre falo, há muitos meios de personalizações de seu blog. Entre eles está o CSS uma linguagem simples de entender, que permite personalizar seu blog inserindo um código acima da tag de fachamento "skin". Hoje, iremos aprender como personalizar a sua barra de rolagem padrão(do sistema) por sua própria barra de rolagem personalizado com CSS3! "Let's Go"!

1. Acessando o painel de seu blog, procure por Modelo > Editar HTML.

2. Logo após, pressione Ctrl+F para abrir o Localizador de seu navegador e procure por:

]]></b:skin>

3. Imediatamente acima desta tag, cole o código CSS3:



::-webkit-scrollbar {
width: 10px;height: 10px;-webkit-border-radius: 16px;
}
::-webkit-scrollbar-track-piece {
background-color: #ffffff;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}

As partes destacadas de vermelho, representa a largura e a altura da sua barra; a azul, representa o valor do arredondamento da barra e por fim, as rosas os backgrounds(sugiro todos de uma cor só).

4. Clique em Visualizar e veja como ficou e se estar tudo correto, depois clique em Salvar.

Pronto! Dúvidas ou qualquer outro comentário sobre o mesmo, deixe seu comentário.
► Postagens Relacionadas:

5 Comentários

Atalaia Virtual disse...

Muito bom, gostei muito deste blog! Sucesso...

29 de dezembro de 2011 13:04
João Neto disse...

Que bom que gostou Atalaia! Volte sempre!

29 de dezembro de 2011 14:30
serdesigner disse...

Primeira vez que vejo esse blog. É mt dahora :p isso pega em todos os navegadores?

1 de fevereiro de 2012 21:54
João Almeida disse...

Sim, funciona no Google Chrome, Firefox, no Internet Explorer 9, Opera 11 (ou superior), Safari 5. Não funciona totalmente bem nas versão antigas do Internet Explorer e do Opera. Espero lhe ter ajudado e obrigado pela participação. Volte sempre.

2 de fevereiro de 2012 00:33
Izaque Liborio disse...

Nossa muito obrigado eu procurava por essa rolagem

5 de fevereiro de 2012 20:39

Postar um comentário