Widget suscripcion gratis blogger configurar correctamente feedburner blogger

Demo en Codepen

En este articulo te ayudaré a mejorar el aspecto de la barra de desplazamiento, de momento solo en navegadores webkit como Opera, Chrome, Safari, entre otros, lamentablemente firefox e IE quedan fuera.


Contenido


Para este aporte he diseñado diferentes barras de desplazamiento del cuerpo del documento, para que puedas personalizar el scrollbar usando css de forma fácil.


Instalar

Para agregar las barras personalizadas, ve a Blogger Temas Personalizar Opciones avanzadas Agregar CSS, en este apartado agregamos el css de los estilos que más nos gusten:


Scroll blanco

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

Scroll delgado

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

Scroll oscuro

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

Scroll naranja

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

Scroll galaxia

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

Scroll verde

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

Preciona el boton Aplicar para guardar los cambios y listo, ya tendrás el scroll de la pagina con un nuevo estilo. Recuerda que si usas Firefox o internet explorer no apreciaras los cambios.


Explicación

Los pseudo elementos disponibles para personalizar la barra desplazamientos en navegadores webkit son los siguientes:


::-webkit-scrollbar {} /* Barra de desplazamiento */
::-webkit-scrollbar-button {} /* Flechas */
::-webkit-scrollbar-thumb {} /* indicador de desplazamiento*/
::-webkit-scrollbar-track {} /* Contenedor de la barra de progreso */
::-webkit-scrollbar-track-piece {} /* barra de progreso*/
::-webkit-scrollbar-corner {} /* Esquina inferior de las barras de desplazamiento */
::-webkit-resizer {} /* Arrastrable para cambiar de tamaño */

Solo debes usar las que necesites para las modificaciones que intentas conseguir, no es obligatorio utilizar todas las reglas, sin embargo, si deseas saber más acerca de ello, te recomiendo el articulo de CSS-tricks sobre barras de desplazamiento.


Cualquier duda puedes dejar un comentarios, respondo a todos. Si te ha servido este aporte no olvides compartir, lo agradeceré mucho. Gracias por pasar.