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.

11 comentarios:

misaani dijo...

Desde luego estoy fascinada con tus entradas.
Esta de cambiar el color a la barra de desplazamiento, la estoy probando y me encanta.
Gracia por tu blog , estoy aprendiendo mucho.

José M dijo...

Gracias por tus comentarios, saludos.

♋ ک!мþℓعмэи†э ĢάŁάҲЇά- Ĵΰ√Єŋîζ ☮ ╠▓╣ dijo...

Gracias por la informacion si me sirvió

José M dijo...

De nada, saludos.

Anónimo dijo...

esa informacion fue de gran ayuda. por fin logre cambiar el color del scroll

Julio Jaro dijo...

Amigo, muuchas gracias por este artículo sobre la barra de desplazamiento. Visité no sé cuantos sitios durante horas y todos ofrecian casi lo mismo. Me desvelé hasta que di con este sitio tuyo, que es muy interesante y me resolviste el problema. Agradesco tu tiempo que invertiste en conseguir que se lograra ver en blogstpot y publicar el como lo hiciste. Saludos!!!

José M dijo...

gracias Julio por tu comentario, saludos :)

Mariangeles dijo...

Hola! muchas gracias funcionò a la primera!
saludos.

José M dijo...

Gracias a ti Mariangeles por tu visita, me alegro que lo hayas conseguido :-))

Sgroya dijo...

Gracias, es justo lo que estaba buscando..
Buen trabajo, Saludos.

José M García dijo...

Me alegro que te haya servido Sgroya, que tengas un buen domingo :-)

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.