martes, 15 de septiembre de 2015

Personalizar barra de desplazamiento (scrollbar)

// // Deja un comentario
¿Ques una scrollbar - barra de desplazamiento?

Citado de wikipedia: 
La barra de desplazamiento (o scrollbar en inglés) es un objeto de la interfaz gráfica de usuario mediante el cual una página de internet, una imagen, un texto, etc, pueden ser deslizados hacia abajo o arriba. La barra aparece por lo general a la derecha de la pantalla.
En este tutorial aprenderemos como modificar dicha barra, principalmente cambiar de color, perosonalizarlo a nuestro gusto. Una scroll modificada da a nuestro blog un aspecto diferente y único, es fácil y solo necesitas editar css de tu blog.

En este mismo blog verán un ejemplo de scroll ya modificado de un color verde con celeste.

Para aplicar este tutorial seguir los siguientes pasos:

  1. Entrar a plantilla → Editar HTML
  2. Apretar control + F y buscar el siguiente codigo: ]]></b:skin>
  3. Antes de ese codigo pegar lo siguiente:
::-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, #95E244 10%,#95E244 51%);
}
::-webkit-scrollbar-track {
}

  4. Cambiar lo que esta en rojo por los colores que quieras y guardar.  

Eso es todo, espero que les guste, gracias por visitar tipsytutoriales.com

0 comentarios:

Publicar un comentario