Personalizar la Barra de Desplazamiento (Scrollbar)

En el tutorial de hoy aprenderemos como modificar la barra de desplazamiento para personalizarla a nuestro gusto. La barra de desplazamiento, o scrollbar, es la que aparece a la derecha, o en la parte inferior de una página web y nos permite desplazarnos arriba y abajo, derecha e izquierda, para poder ver todo el contenido.


Una barra de desplazamiento personalizada le da a nuestro blog o página web un aspecto diferente, más moderno, y permite configurarla con el color que queramos, para que sea más integrada con los colores de nuestro blog.

Nota: Este truco solo será visible en los navegadores Chrome, Safari y Opera.

Podeis ver como queda esta barra en mi blog, o aquí podéis ver un ejemplo de la barra de desplazamiento en un cuadro de texto:

 ¿Cómo personalizar la barra de desplazamiento?

Este tutorial es muy sencillo, los pasos a seguir son los siguientes:

1. Ir a Escritorio Blogger.
2. En el menú seleccionamos Plantilla.
3. Hacemos clic en Editar HTML.
4. En el código buscamos lo siguiente:



]] ></b:skin>



5. Encima de ello tenemos que pegar el siguiente código:

/* --- Scrollbar personalizada zblogger.blogspot.com --- */
::-webkit-scrollbar {
background:#fff;
width:12px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
background-image: -webkit-linear-gradient(top, #1dc2de 10%,#1dc2de 51%);
}
::-webkit-scrollbar-track {
}

Modificaciones al código anterior

En el código anterior podemos modificar algunas cosas para personalizar la barra a nuestro gusto:

• Color de la barra de desplazamiento: Para ello modificar los dos códigos subrayados enverde y poner el código hexadecimal del color deseado.
• Ancho de la barra de desplazamiento: Modificar el número subrayado en azul y poner el ancho en pixeles.
• Tamaño de la sombra: Modificar el número subrayado en rojo y poner el tamaño de la sombra en pixeles

Espero que haya gustado este tutorial, si teneis alguna duda dejad un comentario más abajo.

Imprimir artículo