3

Tutorial Barra De Rolagem Personalizada


Olá, hoje vou ensinar como personalizar sua barra de rolagem com imagem ou com apenas cores, muitos tem dificuldades para achar esse tutorial então resolvi postar aqui no blog ajudinha *-*
Obs: essa barra colorida e a que eu estou usando no blog.

Tutorial de barra rolagem colorida:
vá em Design/Editar html
Aperte ctrl  + F  é pesquise  por:  ]]></b:skin> e cole esse código html acima dele:
(Obs: No código html abaixo esta indicando os locais onde você pode editar para  você não se perder)


Editando as cores:

{background: #000; no-repeat left; /*Cor da barrinha que se

move*/

 Onde tem #000 e a cor preta que se meche, se você não gostar do preto você troca por outra cor pegando em um site de html de cores assim você personaliza do seu estilo. (Obs: Logo abaixo vou postar um site de cores para vocês personalizar do jeito que vocês gostam) :




Aqui na segunda e a mesma coisa do primeiro exemplo e só trocar o #7CFC00 Por sua cor escolhida.

/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {background-color: #7CFC00;

Onde tem  #7CFC00  e a cor verde do fundo olha na imagem abaixo, a seta indicando.


Sites de Html de cores(Para edição de cores):
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
http://www.colorhexa.com/
http://www.ufpa.br/dicas/htm/htm-cor2.htm



Tutorial Barra de rolagem com imagem:

É preciso saber um pouco de html para essa personalização.

Aperte ctrl  + F  é pesquise  por:  ]]></b:skin> e cole esse código html acima dele:


{background: Url ('SUAIMAGEM.png'); no-repeat left; /*Cor da barrinha que se move*/

É muito simples você troca o SUAIMAGEM pelo link da sua imagem, Se você não quiser imagem no fundo e quiser deixar com cor mesmo você substitui o Negrito

background: Url ('SUAIMAGEM.png'); repeat left; /*Cor da parte fixa, que fica no fundo*/

Pelo o html da cor exemplo:

background: #000 ; repeat left; /*Cor da parte fixa, que fica no fundo*/

(Se você não entendeu deixe um comentário porfavor eu não sou muito bom em tutoriais mais acho que deu pra intender um pouco.)

By: Marcelo
Related Posts Plugin for WordPress, Blogger...

Top 5

Seguidores

Colaboradores

Torne-se um Blog amigo e só se escrever Clica aqui .
Tecnologia do Blogger.

Link-me

Redes Sociais
Lime Bobblehead Bunny

Visitas