Personalizar a barra de rolagem do Blogger



Olá gente. Outro tutorial, mas desta vez é do blog SSD Layout. Todos os créditos são de lá. Estou apenas reblogando.

E lembrem-se: antes de fazer qualquer alteração no seu HTML faça um backup!

Vocês já repararam na minha barra de rolagem? Se não, olhe para ela. Diferente, né? Quer personalizar? Então clique em leia mais e veja o tutorial.



O resultado será este, mas você poderá alterar as duas cores.

É essa rosa com fundo preto

Vá em Modelo>Editar HTML e procure pela seguinte tag:

]]></b:skin>
E antes desta tag cole o seguinte código:

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

/***Fim da barra de rolagem***/

Mude o que achar necessário.  Na frente do códio está explicando o que ele faz. Só altere os outros se souber o que está fazendo. Os códigos das cores vocês poderão ver AQUI.

Não esqueçam de deixar suas opiniões.

Compartilhe este post:

Comentários
2 Comentários

2 comentários :

  1. Oi flor, você pediu adoção ao MB para ajudar com seu blog, bom foi mudado algumas coisas, e bom vou deixar o link aqui em baixo para você copiar e cola para ler as novas regras e se inscrever, tá bom? Se dê tudo certo seu blog será adotado no mês de abril. Beijos e obrigada!

    http://misteriodobrilho.blogspot.com.br/2015/02/concurso-de-adocao-de-blogueira-novata.html

    ResponderExcluir
    Respostas
    1. Olá,
      Li a regras e vou tentar! Obrigada por ter respondido! =)

      Excluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes