Barra de Rolagem Personalizada com Imagem (Photoscape/Photoshop)

Hallo!Hoje vim ensinar pra vocês como substituir a barra de rolagem por uma imagem. Se quiser saber como, clique em Leia Mais.



Aqui nesse link eu mostrei como baixar os programinhas que iremos usar neste tutorial. Para começar, clique aqui para salvar a BARRA QUE SE MOVE (rosa). E clique aqui para salvar a BARRA FIXA (azul). Elas vem nessas cores só pra destacar, já que se fossem brancas vocês provavelmente não as veriam.

1. Cores Simples: nessa opção (parecida com a daqui) o que vai fazer diferença é a tonalização.

• Escolha uma cor pra barra de rolagem. Na bandeja de opções no Photoscape, clique no quadrado cheio e escolha uma outras cor, dois tons mais clara/escura do que a primeira. 

• Puxe um outro retângulo da mesma altura mas não muito grosso, cerca de um terço da barra original. Clique em "Foto+ Objetos" para juntar as duas. Provavelmente irá aparecer a janelinha com duas opções, marque a "Combine Sua Foto Com Objetos". 

• Agora vá na aba Tools e clique em "Effect Brush". Clique em "Desfoque- Alto" e passe o pincel em toda a imagem, desfocando. Prontinho! Agora repita o processo com a barra fixa, com outras cores pra não ficar estranho, e clique aqui pra aprender como hospedar.

O resultado final foi este. Se quiser essas imagens, clique aqui (rolagem) e aqui (fixa). 

2. Barra Estampada: 

Abra o arquivo BARRA QUE SE MOVE. Escolha um background ou alguma outra imagem que combine com seu blog, para o tutorial eu escolhi um background rosa. Apenas abri a imagem e redimensionei, é bem fácil. Depois, clique em "Foto+ Objetos" e "Combine Sua Foto Com Objetos". Para a BARRA FIXA eu optei por uma preta no 1° jeito que ensinei.

Hospede as imagens (clique aqui para ver como)

Vamos ao código:

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: url(LINK-DA-IMAGEM) repeat;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: url(LINK-DA-IMAGEM) repeat;
}

Cole acima de ]]> ou de ]]></b:skin>. Então é isso, espero que tenha sido útil pra vocês. Beijos!