Personalizar las Scrollbars - para Chrome y Safari

Hoy les enseñaré a personalizar las scrollbars (barras de desplazamiento) de nuestro blog.
Como dice en el título, este truco sólo afecta a Google Chrome y Safari, ya que se utiliza una propiedad que sólo se aplica en estos navegadores.

Lo único que se necesita es aplizar el CSS, que como ya sabemos, se pega justo antes de ]]></b:skin>

::-webkit-scrollbar {
Estilos...
}
::-webkit-scrollbar-thumb {
Estilos...
}
::-webkit-scrollbar-button {
Estilos...
}
::-webkit-scrollbar-track {
Estilos...
}
::-webkit-scrollbar-corner {
Estilos...
}

Acá un esquema para poder ubicarse mejor:

Se pueden agregar toda clase de estilos: color, borde, resplandor, etc.
Un ejemplo de estilos sería así:

::-webkit-scrollbar {
    width: 16px;
background:white;
}


::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Más información en: Custom Scrollbars in WebKit (Inglés)

Espero que sea útil este tutorial, Chao...