Personalizar Barra de Desplazamiento (Scrollbar) en Blogger

Esta ocasión veremos como cambiar el diseño de la barra de desplazamiento vertical que aparece en nuestro blog. Lo primero que necesitaremos será crear un diseño o escoger uno ya creado, bien de esta publicación o bien de cualquier otra página de internet.



Pulsa el botón para ver una demostración y su autor

Los pseudo-elementos WebKit utilizados en este método solo son compatibles con navegadores basados en este motor como son Chrome, Opera o Safari entre otros. Desafortunadamente, no tendrá soporte con navegadores como Firefox o Internet Explorer.

Una vez elegido o creado el diseño, nos dirigimos a la parte de Tema > Editar HTML de nuestra plantilla y abrimos el buscador del editor.


         Se activa con Ctrl + F y se ve así


Busca la etiqueta </head> y pega encima el código de tu estilo. La estructura de tu diseño debe ser similar a la de este ejemplo:

<style>

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

</style>

Muy importante añadir las etiquetas <style> al principio y final de nuestro código o de lo contrario, no funcionará (ya incluidas)

DISEÑOS DE SCROLLBAR

A continuación te dejo ordenados los diseños que aparecen en la miniatura con su correspondiente código para copiar:

<!-- Custom Scrollbar 1 -->
<style>
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}
</style>

<!-- Custom Scrollbar 2 -->
<style>
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}
</style>

<!-- Custom Scrollbar 3 -->
<style>
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
</style>

<!-- Custom Scrollbar 4 -->
<style>
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
::-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;
}
</style>

<!-- Custom Scrollbar 5 -->
<style>
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
::-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;
}
</style>

<!-- Custom Scrollbar 6 -->
<style>
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
::-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;
}
</style>