lunes, 10 de septiembre de 2012

Personalisemos nuestra barra de desplazamiento


Hola :3 hoy me dí el tiempo de subir un tutorial sobre como editar nuestra barra de desplazamiento de nuestro blogger a nuestro gusto.
Esto es una barra de desplazamiento:

Lo primero que hay que hacer es ir:

Diseño >> Plantilla >> Edición de HTML
{pulsa "Ctrl + F" buscas lo siguiente  ]]></b:skin> }
luego de localizarlo pon el siguiente código justo arriba del código anterior que te di

::-webkit-scrollbar {
height: 12px;
width: 15px;
background: #febeba;
}

::-webkit-scrollbar-thumb {
background-image:url(URL DEL FONDO);
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}


Ya puesto, solo cambias el color de el que quieres. 

El código marcado de azul es el código es de el color de las barritas, al cual puedes conseguir en photoshop online  
El código marcado de fucsia es el código del fondo que quieres que vaya en tu barra de desplazamiento.
Da en vista previa para que veas como va quedando y si te gusta lo guardas .
Estas son los tipos de barritas que hay:


El código que está de celeste; es el código del tipo de barrita. Para ponerle algunas de estas barritas , quitas el que te marque de celeste y pones el codigo que pertence a cada bariita: 

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

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

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

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

Y listo ! ...espero que te haiga gustado la idea NO OLVIDES DEJAR UN COMENTARIO c: chiquitito aver como te salio .

Atte. Angelicoso












6 comentarios: