Line Scrollbar

3.6.13

Line Scrollbar

Oie...hoje trouxe uma outra forma de personalizar a scrollbar/barra de rolagem do blog, lembrando que: funciona no navegador Chrome; pude aprender como fazer graças à HeyKiim; e que já mostrei outras formas de se personalizar a barra de rolagem, vejam em - 5 Mini tutoriais rápidos, fáceis e básicos - Scrollbar personalizada em qualquer navegador com Jscrollpane - Scrollbar padrão fofa.

Essa de hoje é a que estou usando atualmente no blog; trata-se de uma scrollbar discreta, em forma de linha:

Para fazê-la é bem fácil...

Basta ir em Modelo - Editar HTML - procurar por ]]></b:skin> e colar acima disto o seguinte código:

::-webkit-scrollbar-track-piece{
background: #fccaca; /**cor da linha**/
border: 2px solid #ffffff;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{
height: 20px;
display:block;
background:#ffffff;
border: 2px solid #ffffff;
border-bottom:0px solid #ffffff;
border-top:0px solid #ffffff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal{
background:#fcc; /**cor da scrollbar**/
border: 1px solid #ffffff;
}

Onde estiver escrito background é que seria o ideal para alterar o código das cores; as demais se referem às bordas, width e height são largura e altura. Visualize e salve.
Espero que gostem e beijus ;3