Barra de rolagem personalizada (redondinha) - Atualizado!
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:
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)
]]></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:#fffPor essa aqui:
background-image: url('URL DA SUA IMAGEM AQUI');http://goimagines.blogspot.com.br/2011/08/barra-de-rolagem-personalizada.html
0 comentários: