4 de febrero de 2017

Tutorial: Editar las barra de desplazamiento del blog (Scrollbar)

La barra de desplazamiento (scrollbar en inglés) es un objeto de la interfaz gráfica de usuario mediante el cuál una página de Internet, una imagen, un texto, etc, pueden ser deslizados hacia abajo o arriba... 
Esta barra siempre viene con el diseño simple de gris y blanco... pero ahora he encontrado un truco muy fácil para que la barra principal de tu blog tenga una nueva apariencia... ademas, si le agregaste una barra de desplazamiento al gadget de Archivos o a un gadget html esta adquirirá el mismo diseño que la barra principal.

Modificar la barra

Plantilla  →  Personalizar  →  Avanzado  →  Añadir CSS: una vez ahí, pega el siguiente código:
Así se ve
actualmente
el scrollbar
de mi blog

/* BARRA NEW SYNDROME DESIGNS */
::-webkit-scrollbar {width: 10px; height: 10px;}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #000;
}
::-webkit-scrollbar-thumb:hover {
background: #ED816C;
}
::-webkit-scrollbar-thumb:active {
background: #8BCFB0;
}
::-webkit-scrollbar-button:start:decrement {
height: 10px;
width: 0px;
display:block;
background:#eee;
}
::-webkit-scrollbar-button:end:increment {
height:10px;
width:0px;
display:block;
background:#eee;
}

Entendiendo el código:


width: 10px; Ancho de la barra.
→ background: #fff; Fondo del contenedor de la barra. 
→ background: #000; Color de la barra. 
→ background: #ED816C; Color de la barrera cuando se pasa el cursor sobre ella.
→ background: #8BCFB0; Fondo de la barra al desplazarla con el cursor. 
→ background:#eee; Color de la punta superior & punta inferior del contenedor de la barra. 

Personalización extra:

  • Si quieres que la barra sea redondeada agrega border-radius:50px; dentro de de ::-webkit-scrollbar-thumb { . Ejemplo.
::-webkit-scrollbar-thumb {
background: #000;
border-radius:50px;
}
  • Si lo deseas, puedes poner  una imagen como fondo para el contenedor de la barra, solo cambia: background: #fff;  por background: #fff url(URL DE TU FONDO); Ejemplo:
::-webkit-scrollbar {width: 10px; height: 10px;}
::-webkit-scrollbar-track {
background: #fff url(URL DE TU FONDO);
}
Listo. Verifica que se vea como lo deseas y guarda tu plantilla.
Espero les guste este tutorial y que por supuesto les ayude mucho.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

No hay comentarios:

Publicar un comentario en la entrada