sexta-feira, 14 de outubro de 2011

Personalizando Barra de rolagem do blog

Barra de rolagem Chrome

Olá meus amigos! Hoje estarei ensinando vocês personalizar a barra de rolagem do seu blog, ou seja, mudar a cor, o tamanho e deixar seu blog mais atraente para o público. Vamos usar apenas códigos em CSS3, descartando outro tipo de linguagem. Lembrando que só testei no Google Chrome. Então vamos começar!

1. Entre no blogger e acesse o painel principal do seu blog.

2. Clique na guia “Modelo” –> “Edita HTML”.

3. Procure por ]]></b:skin>

4. Acima dessa linha cole o código abaixo.

/* ---------------- 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-->
}

5. Faça as devidas modificações caso necessite e pronto.

Em breve estarei postando diversos estilos de barra de rolagem para você aplicar em seu blog. Espero que ter ajudado. Até o próximo tutorial!

Marcadores: , , , ,