30 setembro, 2011

Dois modelos para personalizar a barra de rolagem

Tumblr

Créditos: Aqui e aqui

Veja os 2 exemplos:

Menina Nerd

Meu Bloguinho

Vamos aprender primeiro o do menina nerd: veja o tuto abaixo

1. Vá em Design Editar HTML Ctrl+F (caixinha de busca) e procure por:

]]></b:skin>

2. Antes de ]]></b:skin>, coloque:

*{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF69B4;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}
::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; }


3.No código destacado em rosa você coloca a cor da  cor da barra, e no destacado em azul coloque a cor de fundo( tabela de cores aqui). Visualize e se estiver dado tudo certo salve.

AGORA o do meu:
Agora se você quiser uma barra rolante igual a minha, segue esses passos:
Vá em DesignEditar HTML
Dê Ctrl+F e, na caixinha de busca, cole:

]]></b:skin>


ACIMA desse código cole:

::-webkit-scrollbar-thumb:vertical {
background: COR DA BARRA DE ROLAGEM;
height:50px;
border: 2px solid BORDA DA BARRA DE ROLAGEM;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed BORDA DA BARRA DE ROLAGEM;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(URL DA IMAGEM DO FUNDO DA BARRA DE ROLAGEM) repeat;
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}


Onde está : COR DA BARRA DE ROLAGEM  Você coloca a cor que você quer a barrinha que sobe e desce!
E onde está: border: 2px solid  Você coloca o tipo de borda! Pode achar algumas aqui( clique aqui )
E onde está: URL DA IMAGEM DO FUNDO DA BARRA DE ROLAGEM  Você coloca o url do fundo que você quer!

Então é isso beijinhos gente!


4 comentários: