lunes, 18 de marzo de 2019

TUTOBLOG #3: Personalizar la Scroll bar

¡Hola corales!

Esta semana he estado algo desaparecida, y es que en la universidad me están cargando de trabajos y apenas puedo leer nada o escribir una nueva entrada. Intentaré subir dos entradas por semana a partir de ahora, lunes y jueves posiblemente, para mantener un ritmo constante y así obligarme a mí misma a sacar algo de tiempo para el blog.
Hoy toca Tutoblog, muy sencillo pero que ayuda mucho a que el blog tenga un aspecto más cuidado.

Lo más sencillo de este tutorial es el primer paso; accedéis a Diseño y creáis un Gadget HTML donde hay que pegar el siguiente texto.

<style>
::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#fd7f00; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #fd7f00; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
</style>

Una vez copiado este código, podéis cambiar los colores o cualquier otro elemento, sin cambiar la estructura del código ya que puede que no funcione luego. Una página que yo utilizo para saber cual es el color que busco exactamente es Color Hex, es muy intuitiva y para cambiar los colores solo tenéis que cambiar donde pone "color:#" por el código de color que hayáis escogido.

Y ya está, el resultado es una barra lateral como la que tengo yo en mi blog, aunque con vuestros cambios realizados. Espero que os haya gustado este pequeño tutorial, y si tenéis alguna duda o sugerencia, no dudéis en decírmelo en comentarios. 


1 comentario: