Barra de Rolagem com imagem

O tutorial de hoje é bem simples é fácil. Ensinarei como personalizar a barra de rolagem com imagens. Na verdade é mais do que fácil por apenas uma imagem, mas a graça é o tipo de imagem. Se deixa-lo com algumas bordas em pixel ou pedaços falhados, faz um efeito bem legal. Os códigos já estão com toda explicação, mas aconselho não colocar cores apenas imagens. Pois se usar uma imagem com transparência a cor vai aparecer...

As cores são clarinhas mas dá para ter uma ideia é só clicar aqui: Preview 

1. Vá até a pagina Modelo>> Editar HTML e procure por ]]></b:skin> e acima cole:

Códigos

::-webkit-scrollbar{
width: 13px; /*Largura da barra vertical*/
height: 5px; /*Largura da barra horizontal*/
}
::-webkit-scrollbar-track-piece{
background: #cor url("url da imagem de fundo") repeat;  /*Leito da barra*/
}
::-webkit-scrollbar-thumb:vertical{
background: #cor url("url da imagem da barra que se move") repeat; /*Barra que se move*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal{
background: #cor url("url da imagem da barra que se move") repeat; /*Barra que se move*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Entendendo o código: Já coloquei toda explicação no código, mas a parte mais importante de arrumar esse código é a imagem. É aconselhável deixar a largura dela exatamente como a da barra. Exemplo sua barra terá 17px de largura então as imagens devem ficar entre  16px ou 17px.

                              

Todos tem dimensões de 17x467 menos o primeiro que tem 13x367. Para quem quiser alterar as cores deixei dois modelinhos em PSD para baixar: Download | Link Direto