personaliza tu barra de desplazamiento

hola gente aqui les traigo un nuevo tuto en el cual le enseñare a como cambiar tu barra de desplazamiento
muchos no saben lo que es la barra de desplazamiento, bueno es la barrita que esta subrayada en la foto..

 y bueno estas barritas la tienen todas la paginas wed hasta las carpetas de nuestra computadora,

 la podemos personalizar del color que queramos oki, como esta

esto es muy sencillo, primero

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;

--------------------------------------

Y bueno ahora si ya lo guardas o das en vista previa y eso es todo Un beso para todas..

Phanie♡

NO COPIES ESTO ES SOLO PARA QUE LO APLIQUES A TU BLOG , PERO NO PARA QUE LO POSTEES