Barra de Desplazamiento personalizada

Y continuando al anterior post y antes de irme a dormi (ya son las 4am). Este es el último tutorial del día o bueno de la madrugada. LOL. Es que de seguro en la noche volveré con más.

Bueno ya aprendimos a como colocar barras de desplazamiento a la sección de las entradas. Ahora a PERSONALIZARLA! Existen dos formas de personalizarlas, A COLORES y CON FONDO. No se preocupen que ambos métodos se los voy a enseñar.

Aquí viene el PASO A PASO

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

Código a Colores

/* scrollbar ----------------------------------------------- */ ::-webkit-scrollbar { height: 12px; width: 15px; background: #feaaaa; } ::-webkit-scrollbar-thumb { background: #000; -Moz-border-radius: 5px; border-radius: 5px; }

Código con Fondo

/* scrollbar ----------------------------------------------- */ ::-webkit-scrollbar { height: 12px; width: 15px; background: url(#); } ::-webkit-scrollbar-thumb { background: url(#); -Moz-border-radius: 5px; border-radius: 5px; }

Modificaciones

• Código a Colores: cambiar background por el código html del color deseado.
• Código con Fondo: cambiar el background donde dice url, cambiar el símbolo de numeración (#) por el enlace de la imagen que se desee.
• A continuación dejo cuatro códigos para cambiar la forma de la Barra de Desplazamiento. Sólo hay que cambiar la siguiente línea  -Moz-border-radius: 5px; border-radius: 5px;  por cualquiera de los códigos de abajo.

                        

A  -Moz-border-radius: 5px; border-radius: 5px;
B  -Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;

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

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