11 de jan de 2013

Barra de rolagem colorida

Olá pessoal, hoje trago para vocês um tutorial muito fácil de executar,
é a barrinha de seu blog colorida e arredondada.
Vamos aprender?

No html de seu blog, aperte as teclas ctrl+f e procure por: ]]></b:skin> 

Cole o código abaixo antes dele:
Rolagem vertical da página
 ::-webkit-scrollbar-thumb:vertical {
    background: #F0F7FF ; /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 horizontal da página

    ::-webkit-scrollbar-thumb:horizontal {
    background-color:#F0F7FF ; /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: #D0E7FE; /Cor da parte fixa, que fica no mundo/
    border: 1px solid #bgh; /Coloque borda se quiser*/
}

Personalizando a barra de rolagem

Em background - coloque a cor que ficar melhor em seu blog;
Se não quiser cantos arredondados apague o que está em roxo.

Créditos:

4 comentários :

  1. eu não achei o "expandir modelos de widgets"

    :/

    ResponderExcluir
    Respostas
    1. Duas Garotas, você não precisa mais expandir modelos de widgets, esta função não é mais usada no blogger.
      No html de seu blog aperte o botão direito do mouse para abrir a caixinha de busca, quando abrir digite o código desejado e dê enter.

      Excluir
  2. Oie eu estou tentando fazer isso no meu blog a tempos mas vou tentar dessa vez espero que der certo ah e eu peguei a imagem do post e é por isso que estou creditando!

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo