Tutorial {Personalizando el scroll bar de tu blog}

Hola! amiwis (?) hoy les traigo este tutorial sobre como personalizar tu scrollbar wiii! (?) ok, ahora si les puedo pasar captures, antes no podía porque no se que le pasaba a mi laptop que se volvió medio loca y no sacaba captures pero ahora si!:

Lo que indica la flecha es el scroll bar

1. Vamos a Plantilla > Editar HTML
2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
3. Buscamos: ]]></b:skin>
4. Arriva vas a poner este código:

::-webkit-scrollbar {
height: 12px;  /* Altura del scroll bar */
width: 15px; /* Anchura del scroll bar */
background: #FA58D0; /* siquieres poner una imagen en vez de un color cambia esta linea por background-image:url(URL del fondo que quieres); */
}
::-webkit-scrollbar-thumb {
background: #00BFFF; /* siquieres poner una imagen en vez de un color cambia esta linea por background-image:url(URL del fondo que quieres); */
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;}

• Los bordes del botón (Si no los quieres borra lo que esté en negrita) puedes editarlo a tu gusto basado en las imágenes que se muestran a continuación:

Creditos a Anniz Blog por la imagen

1. -Moz-border-radius: 5px; border-radius: 5px;
2. -Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;
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-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;

Y Listo! solo guardas y ya! Bye!