quarta-feira, 5 de setembro de 2012

Barras de rolagem personalizadas ~ 1

553527_422689427773846_1929585998_n_large
(www)

Olá Fulanos :) Hoje vou ensinar vocês a fazerem/colocarem uma barra de rolagem personalizada no seu blog ^^ Existem vários tipos e hoje vou ensinar um deles para vocês:



Você pode personaliza-las como quiser e até deixar em um estilo mais redondo :) Quer aprender como fazer? Clique em leia mais !o!

Vamos lá :)  ~tutorial em encontrado no blog Bad Repution~

1. Colocando a barra de rolagem:

  • Vá em Modelo  Editar HTML (MUITO IMPORTANTE: copie o HTML atual, pois caso houver algum problema é só trocá-lo pelo novo);
  •  Aperte Ctrl+F e procure por ]]></b:skin>;
  • Cole o código a baixo antes dele:

/*** 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*/
}
2. Personalizando a barra de rolagem:

  • Trocando as cores: Bom, essa parte é bem simples, acho que quase todo mundo sabe fazer, mas para quem não sabe    é só trocar o código depois de  background: # por o código da cor desejada (tabela de cores aqui).
  • Colocando imagem de fundo em vez de cor: Estão vendo onde está escrito: background: # ou background-color:# + o código da cor? É só trocar por background: url() e colocar entre os parenteses o URL da sua imagem ^^, simples não é?
  • Bordas: Para mudar o tipo de borda é só trocar o código por:
border: 2px outset #ff5e9f

border: 3px inset #FFFF99

border: 4px ridge #46c74e

border: 3px groove #eded58

border: 4px double #FF0000

border: 1px solid #ed574c

border: 2px dashed #6a55ed

border: 2px dotted #919191

(bordas encontradas nesse tutorial do Bad Repution)

  • Largura: Só mudar a parte em verde;
  • Deixar a barra quadrada: É só diminuir ou apagar os pxs das partes em laranja ^^.

No próximo turorial vou ensinar vocês a fazer esse tipo de barra:


Beijos, até mais ;)

3 comentários:

  1. Só uma sugestão: para a gente não ter que ficar apagando, retire as coisinhas escritas entre /* pois eu acho chato ficar apagando essas coisitas...
    Bjs e obrigada pelo tutorial ^^

    ResponderExcluir
    Respostas
    1. Relaxa, você não precisa ficar apagando ^^, elas não fazem a menor diferença na hora de por o código :) Por isso que elas estão entre /*

      Obrigada pela sugestão Ju :)

      PS.: Tive um probleminha com o novo design do Fulanhin :(

      Excluir
    2. Ah é? Isso faz sentido... ><
      E qual é esse probleminha? Me conte pelo e-mail, é melhor!
      Abraços!!

      Excluir

Quer comentar? Muito obrigada XD

Comente o que quiser menos comentários que ofendam alguém ou algo, que contém informação pessoal ou conteúdo inadequado. Pode criticar (educadamente), queremos saber sua verdadeira opinião :)

Se tiver um blog, tumblr, vlog, we heart it, página no facebook ou qualquer outra coisa do tipo, coloque o link aqui para que possamos visita-lo o3o

Ah! Nada de comentar "seguindo, segue de volta?", comments desse jeito vão ser excluídos u.u (a não ser que tenham a sua opinião sobre o post).

Beijos e mais uma vez, muito obrigada ><