Personaliza el Scroll de tu Blogger con CSS

Todos hemos llegado a ver alguna que otra página con la barra de scroll personalizada, ya sea con un color diferente al usual o con alguna sombra. Y seguramente haz querido aplicarlo a tu blog en blogger pero son con muchos pasos o tienes que usar código complejo de Javascript, pues el día de hoy te enseñaré a personalizar la barra de scroll de tu blog con CSS.

Advertencia: este método sólo es compatible con navegadores basados en Webkit. Para mayor información visita Can I Use.

Modificar la barra de scroll en Blogger

Desde nuestro panel de administración vamos a Tema > Personalizar > Avanzado > Añadir CSS y agregamos el siguiente código:

body::-webkit-scrollbar {
    width: 8px; /** Tamaño Scroll en Vertical */
    height: 8px; /** Tamaño Scroll en Horizontal **/
}

body::-webkit-scrollbar-thumb {
    background: #ccc; /** Color barra **/
    border-radius: 4px; /** Borde redondeado barra **/
}

body::-webkit-scrollbar-track {
    background: #e1e1e1; /** Color fondo **/
    border-radius: 4px; /** Borde redondeado **/
}

/** Al pasar el cursor **/
body::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3; /** Color barra **/
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); /** Sombra barra **/
}

body::-webkit-scrollbar-track:hover, 
body::-webkit-scrollbar-track:active {
    background: #d4d4d4; /** Color fondo **/
}

Como ves en el código anterior he comentado cada línea con su respectiva función para que puedan personalizarlo a su gusto y al estilo de su blog.

No te olvides de compartirnos tu resultado en los comentarios, y si tienes algún problema al modificar la barra de scroll de tu blog puedes dejarnos un comentario y te responderemos lo antes posible.