Personaliza tu blog: Scrollbar





Bueeeeeeeeeenas.
Hoy traigo este otro tutorial. La verdad últimamente he tenido algo de tiempo libre y se me han ocurrido algunas ideas de cosas para postear. Me abrí una cuenta en DeviantArt para subir mi contenido de diseño gráfico de descarga gratuita y reactivé mi cuenta en Wattpad para subir algunas cosas que estoy escribiendo a penas termine. ¡Les cuento que estuve haciendo una historia con algunos amigos! Pues me encargaré de redactarla, y otra amiga se encargará de hacer las ilustraciones a lápiz para que luego yo las pase a digital. Tal vez haga un post introduciendo un poco a la historia y sus personajesss. Sin decir mucho vamos con el tutorial.

Un scrollbar es la barra de desplazamiento que encontramos en toda página web para poder navegar en ella y ver todo su contenido. En este caso les traigo un opción que solo se ve en Google Chrome. Pero luego traeré otras opciones para otros navegadores, aún trabajo en ello.

Esta opción lo que hace es ocultar el scrollbar de fábrica y crear una imitación personalizable.

Para añadir su scrollbar personalizado vayan a 

Plantilla >> Editar html

buscamos ]]></b:skin> y arriba pegamos el código.
::-webkit-scrollbar{
width: 16px;
background: #FFFFFF; /* Color de fondo */
}
::-webkit-scrollbar-thumb{
background: #000000; /* Color de fondo */
}
Podemos cambiar la forma de nuestra barra de desplazamiento a nuestro gusto personal, así que aquí abajo les dejo algunos códigos que pueden añadir para modificarlo un poco.


Esto se coloca en el primer código (::-webkit-scrollbar{)

1
-Moz-border-radius-topLeft: 50px;
border-top-left-radius: 50px;
 -Moz-border-left-bottomleft: 50px;
border-bottom-left-radius: 50px;

2
-Moz-border-radius: 5px;
border-radius: 5px;

3
-Moz-border-radius-bottomRight: 50px;
border-bottom-right-radius: 50px;
-Moz-border-radius-topLeft: 50px;
border-top-left-radius: 50px;

4
-Moz-border-radius-bottomRight: 50px 25px;
border-bottom-right-radius: 50px 25px;
-Moz-border-radius-topLeft: 50px 25px;
border-top-left-radius: 50px 25px;

Los invito a mi post anterior, para aprender a editar negrita, cursiva, subrayado, y tachado.
Click aquí.

¡Nos leemos!


3 件のコメント:

  1. ¡Hola! En una época me sentia apta para manosear todo el html y cambiarlo a gusto pero hoy en dia no se ni lo que hago JAJAJA asi que seguramente me lea todos tus tutoriales para ver que le puedo hacer. ¡Gracias por compartirlo! un beso :)

    返信削除
    返信
    1. JAJAJAJ, suele pasar cuando lo dejas un tiempo, ¡Pero el html es muy sencillo!

      Saluditos y gracias por comentar, un beso.

      削除
  2. Holaa, qué bonito el scrollbar, personalizarlo sí que le da su toque al blog :D
    ¡Beesos! :3

    返信削除