Personalizar la Barra de Desplazamiento (Scroll bar) en el blog

¿Quieres mejorar la barra de desplazamiento de tu blog?

La barra de desplazamiento es aquella que aparece en la parte derecha de la pantalla y permite a los usuarios desplazarse hacia abajo o hacia arriba en el blog.

Para darles una experiencia de uso fácil a los visitantes es esencial disponer de un desplazamiento suave; un desplazamiento personalizado como el que veremos hoy, hace el trabajo muy facil, agradable y sencillo.

¿Porque usar una barra de desplazamiento personalizada?

Una buena barra de desplazamiento añade una vida nueva y elegante a su sitio web. Imagina que una persona tiene un sitio web muy profesional, pero la barra de desplazamiento es de la vieja escuela, es bastante claro que, destruirá el panorama completo de un sitio web. 

A continuación observa la diferencia entre una barra antigua y una personalizada:

La anterior imagen es solo un ejemplo, porque la que haremos sera un poco diferente a esa.

Observa aqui una vista previa de la barra en funcionamiento

Personalizando la Scroll bar

Lo que haremos para mejorar nuestra barra de desplazamiento sera muy sencillo.

Solo utilizaremos un CSS en nuestra plantilla y el trabajao estara terminado.

Entonces estando en blogger ve a Plantilla - Editar HTML, das un clic dentro de la plantilla, presionas Ctrl + F, escribes ]]>

 y oprimes Enter. Justo antes pega el siguiente codigo CSS.

/* --- Barra de desplazamiento: terrenoblogger.co --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #62ABD2 10%,#62ABD2 51%);
}
::-webkit-scrollbar-track {
}

Recuerda reemplazar #62ABD2 por el color de tu preferencia y que mas se ajuste a tu blog

Muy bien, con esto ya tendrás una barra de desplazamiento personalizada para blog.

Cualquier inquietud puedes comentarla