quinta-feira, 20 de dezembro de 2012

0

Tutorial - Barra de Rolagem para Blog - Redonda e Quadrada

Oi Pessoal!
Bom hoje vou ensinar como colocar a barra de rolagem colorida no blog - a redonda e a quadrada.
Vamos lá?
Cliquem em leia mais!



Se usarem, creditem o Cute World.

Vou ensinar primeiro a redonda:
Vá para:
Modelo>Editar HTML>Prosseguir

Aperte Ctrl+F e procure por:

]]></b:skin>

Agora, cole o código abaixo ACIMA de ]]></b:skin>:

::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;height:50px;
border: 2px solid #fff;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 #fff;
-webkit-box-shadow:0 0 1em #eee; }:
::-webkit-scrollbar {height:10px; width:20px; background: url(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;}


O que está em rosa é a cor da barra de rolagem.
O que está em vermelho é a borda da barra de rolagem.
url(fundo da barra de rolagem) é o url da imagem do fundo da barra de rolagem. Se você não quiser uma imagem, só uma cor, apague url(fundo da barra de rolagem), e cole o código da cor desejada.
Pare escolher as cores, clique aqui.





Vamos agora para a barra de rolagem quadrada:

Vá para:
Modelo>Editar HTML>Prosseguir

Aperte Ctrl+F e procure por:

]]></b:skin>

Agora, cole o código abaixo ACIMA de ]]></b:skin>:


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


Agora é só trocar #9B30FF pela cor da barra de rolagem e #000000 pela cor do plano de fundo.

Está pronto!
Espero ter ajudado!
Beijoss 




Nenhum comentário:

Postar um comentário

Oi Gente!
Eu AMO quando vocês comentam!
--> Por favor, comentem sobre o post.
-->Quer fazer críticas? Seja educado e tenha respeito por favor.
-->Quer elogiar? Fique a vontade!
-->Quando comentar deixe o nome do seu blog! Isto é, se você tiver, é claro.
-->Pode colocar "SEGUINDO SEGUE DE VOLTA?", mas eu só vou seguir se eu gostar do blog. (;
--> Aceito selinhos e tags
Se o seu comentário estiver dentro dos padrões acima, vá em frente! =D