Aviso importante: Faça um BACKUP do seu template antes de fazer qualquer modificação. O Next Gamer não se responsabiliza por deformações no seu blog por edição mal sucedida.
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!
Nenhum comentário:
Postar um comentário