Personalizar barras de desplazamiento del blog

Hoy veremos cómo personalizar las barras de desplazamiento de nuestro blog de Blogger.

Esto podríamos realizarlo mediante la modificación del código pero, en esta ocasión, en vez de explicaros para qué sirve cada línea de código vamos a acceder a la página iconico.com donde tenéis un aspecto más visual de los cambios que váis a realizar en vuestras barras de desplazamiento.

Como podemos en dicha página, tenemos una aplicación para ir directamente seleccionando los colores que queramos y, una vez elegidos, nos generará el código necesario para copiarlo directamente a nuestro blog.

El código debemos pegarlo en la definición del CSS de la plantilla, pero he realizado varias pruebas y hay que hacer alguna modificación al código generado para que funcione con el blog de Blogger.

Para que lo podáis ver con un ejemplo, vamos a suponer que el código que nos genera esta página es el siguiente:

<style>
body {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}
</style>

Solo nos vamos a quedar con este código:

scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;

Una vez copiado, accedemos a la ficha Diseño -> Edición de HTML y buscamos, en la definición del CSS de nuestra plantilla, el siguiente código:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
}

Como siempre digo, el código de una plantilla a otra puede variar. Una vez hayamos encontrado el código anterior, justo donde acaba después de la llave de cierre añadimos lo siguiente junto con la parte de código con la que nos habíamos quedado de la página iconico.com

html {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}

Completados todos estos pasos, solo debemos guardar los cambios y visualizar el resultado.