Barra de rolagem em 2 formas

Hooy minhas balinhas de caramelo, como vão? Eu vou na mesma de sempre, aquela chatisse, mais isso não me impede de postar *----*. Então, que tal deixar a barra de rolagem do seu blog tipo FOFINHA? Legal né! Muitos blogs usam a barra de rolagem personalizada e eu vou ensinar vocês, mais de duas formas: a redonda e a quadrada. Legal né! Vamos ao tutorial hoje, dedicado à minha linda leitora e fá do blog Janis Evely, que todo dia visita o blog e que me deixa feliz. Vamos lá:

Bom, primeiro a redonda, que eu acho a mais fofa:

Vá em Design > Editar HTML > Dê um Ctrl + F e procure por:

]]></b:skin>

Acima dele, cole isso:

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

Explicação:

* O que está roxo é a cor da barra de rolagem.

* O que está vermelho é a borda da barra de rolagem.

* O que está azul é o plano de fundo da barra, você precisa colocar a URL de algum background, no final do post colocarei alguns.

                   

Agora vou ensinar a quadrada, que não é tão fofa:

Vá em Design > Editar HTML > Dê um Ctrl + F e procure:

]]></b:skin>

E acima dele, cole esse código:

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

Explicando:

* O que está roxo é a cor da barra de rolagem.

* O que está azul é a cor do fundo.

Bom, aqui estão alguns backgrounds pra vocês colocarem na redonda, porque na quadrada não precisa:

             

Por hoje é isso gente, beijooos!!