Personalisa tu Barra de desplazamiento

Personalisa tu Barra de desplazamiento

Hola! que tal? bueno les dejo un pequeño tuto sobre como personalizar nuestra barrita de desplazamiento.. 

¿QUE ES LA BARRA DE DESPLAZAMIENTO?

La barra de desplazamiento es esta barrita...

Bueno esta barrita la tienen todaaas las paginas y hasta carpetas de nuestra compu :)

Pero como podemos personalisarla de el color que queramos o con un fondo? como esta..

Bueno es muy sencilloo!!

Bueno primero , si lo unico que quieres es cambiarle el color haras lo siguiente..

DISEÑO>>PLANTILLA>>EDICION DE HTML

Luego buscas lo siguiente:

]]></b:skin>

Bueno y para que busques mas rápido pulsa CTRL + F

te aparecera una barrita de busqueda y colocas el código que te di :)

Te lo buscara enseguida y te lo marcara.

Luego que ya lo localisaste pon el siguiente codigo justo arriba de elanterior que te di..

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

::-webkit-scrollbar-thumb {
background: #00BFFF;
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}

Una vez puesto eso cambias el color de el que quieres las dos barritas :)

El codigo marcado de azul es el código es de el color de las barritas , al cual puedes conseguir aquí o en photoshop :) cualquier cosa preguntenme :)

Una vez hecho eso da en vista previa para que veas como va quedando y si te gusta lo guardas :)

AHORA: Lo haremos poniendole fonfo , ese fondo lo puedes hacer en photoshop o descargarlo y lo subes a tynipic para que te den el link de la imagen :)

Bueno si le quieres añadir fondo has lo siguiente:

VAN A 

DISEÑO>>PLANTILLA>>EDICION HTML>>

& Buscas el siguiente codigo:

]]></b:skin>

& Pegas el siguiente codigo arriba de el codigo que buscaste que te di :)

::-webkit-scrollbar {

height: 12px;

width: 15px;

background-image:url(URL DEL FONDO);

}

::-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;
}

Bueno ps ya que pusieron ese codigo como ven ahi dice 'URL DEL FONDO' ps ahi ponen las url de los fondo que quieren ponerlo

el primero es de la barra que esta precisa y el segundo de la que se deslisa :) 

Solo dan a vista previa para ver como queda y lo guardan :)

Bueno ahora hay varias forma de barritas..

Bueno estas son de las barritas que se desplazan :)

Como vez en los codigos te marque de morado esos son los codigos de tipo de barritas bueno para ponerle alguno de estos tipos de barritas , quitas el que te marque de morado y pones el codigo que pertence a cada bariita...

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;

Creditos:Phaniie-Blog