Personalizando a barra de rolagem

Xoxo...

Hello my lovers,trouxe três estilos de barra de rolagem super cute... Redonda,quadrada e redonda com imagem de fundo,os devidos crédiios ao Farry Teen. Mas antes de ir para o tutorial que tal participar do joguinho valendo divulgação? Clique aqui e tente descobrir qual foto da Demi eu escolhi. Agora sim,vamos ao tutorial?

Barra de rolagem redonda

1# Vá em Design > Editar HTML > Aperte F3 e cole na caixinha de pesquisa o código abaixo:

]]>

3# Agora depois desse código que aparecerá destacado em laranja cole esse código:

/*** 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*/

Personalizado 

O que está em rosa é a barra de rolagem vertical,o que está em azul é a barra de rolagem 

horizontal,e o que está em verde são os mínimos detalhes... Personalize as cores usando essa tabela aqui.

Visualize,se estiver tudo certinho salve.

Barra de rolagem quadrada

1# Vá em Design > Editar HTML > Aperte F3 e cole na caixinha de pesquisa o código abaixo:

]]></b:skin>

3# Agora depois desse código que aparecerá destacado em laranja cole esse código:

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }

::-webkit-scrollbar-thumb { background: #ff004d; }

*{

scrollbar-face-color:#ff004d;

scrollbar-highlight-color:#ff004d;

scrollbar-3dlight-color:#343434;

scrollbar-darkshadow-color:#343434;

scrollbar-shadow-color:#ff004d;

scrollbar-arrow-color:#343434;

scrollbar-track-color:#343434;

}

Personalizando

O que está em verde é a cor da barra de rolagem, e o que está em rosa é a cor do fundo da barra de rolagem.

Você personaliza usando essa tabela aqui.

Visualize,se estiver tudo certinho salve.

Barra de rolagem com imagem de fundo

1# Vá em Design > Editar HTML > Aperte F3 e cole na caixinha de pesquisa o código abaixo:

]]></b:skin>

3# Agora depois desse código que aparecerá destacado em laranja cole esse código:

::-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;}

Personalizando

Onde está escrito ''Fundo da Barra de rolagem você coloca o URL da imagem que será o fundo da barra de rolagem (algumas aqui e aqui também), e onde está destacado de azul você coloca a cor da barra de rolagem usando essa tabela aqui.

Visualize,se estiver tudo ok,salve.

Beijos,

Luísa...