-: Barra de Rolagem Colorida

Olá minhas sereias tudo beleza? E ai estão gostando do MFF das postagens ? Da nova postadora ?

Espero que estão gostando

Qualquer reclamação fale comigo

Vim hoje fazer um tutorial ótimo, e tenho certeza que vocês vão amar

Não me diga que você sempre pesquisa pesquisa como EU e sempre o tutorial estava errado?

É isso aconteceu muito

Mais aqui no MFF todos os Tutoriais são testados exclusivamente para vocês

Todas as imagens são Nossas e de ninguem. Recuso plágio

Chega de drama ne? Então o Tutorial é de Barra de rolagem dois tipos por exemplo a minha é a quadrado e existe a redonda é muito linda querem ve

Muitas pessoas não conhecem mais vou postar então Barra de Rolagem Quadrada X Redonda certo?

Vamos ao que interessa.

Ficaria assim:

Se interessou Leia Mais...

Entra na sua conta do Blogger vai em Design e Html e aperte Ctrl + F e procure por:

]]></b:skin>

O codigo irá aparecer em Laranja

E em cima de ]]></b:skin> você coloca esse código

Redonda

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

Agora Vamos entender o código

O código destacado em azul é a cor da barra de rolagem, o de vermelho é a borda da barra de rolagem e o rosa é a imagem do fundo da barra de rolagem

Agora Vamos a Quadrada

Procure por :
]]></b:skin>
Vai aparecer em Laranja.
E logo acima de ]]></b:skin> cole isso:

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