Barra de rolagem personalizada (redondinha) - Atualizado!

Barra de rolagem personalizada (redondinha) - Atualizado!

Gente eu já vi muitos tutoriais ensinando a personalizar a barra de rolagem mas ainda não havia achado um de como deixar ela "redondinha" e com fundo como a do Cherry Bomb sabe? Mas dei mais uma procurada e achei no tumblr I love themes só tive que mudar o local de onde colar o código, afinal, onde eu achei o tuto era um tumblr e os códigos são diferentes e tal. O código tem os créditos mas não vamos tirar por questão de respeito ao trabalho dos outros ok? Vamos lá então:

Primeiramente abra seu blog, vá em Design, depois em Editar HTML. De Ctrl + F para abrir a caixinha de busca e procure pela seguinte tag:

]]></b:skin>

Logo ACIMA cole o seguinte código:

/********* Rolagem Por QuinzeParaMeiaNoite.tumblr.com *********/
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background-image: url('URL DA IMAGEM');
background-color:#fff; height:100px; 
-webkit-border-radius: 2ex; 
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em; 
-webkit-box-shadow:0 0 1em #eee;}

/*** Rolagem da Horizontal da Página***/ 

::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');

::-webkit-scrollbar-thumb:horizontal {background-image: url('URL DA IMAGEM');
background-color:#fff; height:10px; 
-webkit-border-radius: 2ex;
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;
-webkit-box-shadow:0 0 1em #eee; }


/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {height:10px; width:20px; background-color:#fff;-webkit-box-shadow:0 0 1em #eee;} 

/********* Fim da Rolagem, não retire os créditos *********/

Atualização: Como não ficou muito claro o que é barra fixa e barra móvel (logo abaixo) eu fiz uma imagem ilustrando:

                                          Bem mais claro agora não?

Agora vamos entender o código para podermos personaliza-lo:

URL DA IMAGEM - Se você quiser por uma imagem de fundo troque essa frase pela URL da sua imagem.


#fff - É a cor da barra que rola. Caso você não queira por uma imagem de fundo, mude para a cor que você quiser consultando essa tabela.


#fff - É a cor da barra que NÃO rola.


#eee - É a cor da sombra das caixas. Mude para as cores desejadas.


width:20px - É a largura da barra. Mude o 20 para o valor desejado.


- Se você quiser colocar um fundo na parte fixa, como no Cherry Bomb troque essa tag abaixo (que se encontra na mesma linha de width:20px)

background-color:#fff

 Por essa aqui:

background-image: url('URL DA SUA IMAGEM AQUI'); 

Bom, era isso espero que tenham entendido e gostado.