En este tutorial vamos a 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.
Este tutorial es muy sencillo, los pasos a seguir son los siguientes:
Encima de ello tenemos que pegar el siguiente código:
Ahora cambiaremos unos valores a nuestro gusto:
El color azul es el fondo de nuestra barra, el rojo es el ancho de nuestra barra y el morado es el color de nuestro scroollbar.
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.
Cabe mencionar que estos cambios solo serán visibles en los navegadores de Chrome, Safari y Opera.
- Ir a Escritorio Blogger.
- En el menú seleccionamos Plantilla.
- Hacemos clic en Editar HTML.
- En el código buscamos lo siguiente:
]] ></b:skin>
Encima de ello tenemos que pegar el siguiente código:
/* --- Scrollbar personalizada tutoriales2010.blogspot.mx --- */
::-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 {
}
Ahora cambiaremos unos valores a nuestro gusto:
El color azul es el fondo de nuestra barra, el rojo es el ancho de nuestra barra y el morado es el color de nuestro scroollbar.
.png)
