FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Personalizar la scrollbar de tu blog

11 may 2012
Hola bloggeritas! Les vengo con un pequeño tutorial de cómo personalizar la barra esa del costado con la que se mueven por las páginas, no estoy segura de si se llama scrollbar pero creo que sí. Lo hago porque me lo preguntó AriiRyan'' en el Ask Box pero creo que le puede gustar a muchos!! Es muy simple así que veamos como se hace!!




1. Vamos a la pestaña "Plantilla" de nuestro blog y entramos en la "Edición de HTML".
2. Abrimos el buscador del explorador (CTRL+F) y buscamos "]]></b:skin>"
3. Y arribita de eso pegas el siguiente código

::-webkit-scrollbar{
background-color:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
background-color:#ff4c96;
width:10px;
}

Pero ¡ALTO! aún no estamos listos para guardar los cambios. Presta atención para que puedas personalizar la barra a tu gusto y para que combine con tu blog.

A ver... la primera parte del código que pone "webkit-scrollbar" es la barra completa y la segunda que pone "webkit-scrollbar-thumb" es la chiquita (que aquí en el blog aparece un fucsia más oscuro). 

"background-color" es color de la barrita, ahi cambias el código por los que tu quieras.
"width" es el anchito de la barra, te recomendaría que lo dejes en 10, sino se verá muy grande, pero ya sabes tu puedes probar

Además a la segunda parte del código le puedes lo siguiente para que la barra pequeña se vea redondeada en los bordes, como la mía:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;

Pero es opcional, sólo si tu quieres. Y bueno, ¡eso es todo! Espero que les guste y les sirva, como siempre!!  ¡¡Sigan poniendo sus dudas y pedidos en el Ask Box que cuanto antes puedo las contesto y subo lo que pidan!!

¡No olviden comentar y agradecer!


15 comentarios :

  1. Me encanto! Gracias :D

    ResponderEliminar
  2. asjdlfasd, acabo de ver esto y me encanta.
    Muchas gracias<33

    ResponderEliminar
  3. Perdoname Pero no entendí ni una mierdaaa! cual es la pestaña esa que diceplantilla ?? donde esta a mi no me aparece ademas pongo los codigos y no sirven para nadaa!

    ResponderEliminar
    Respuestas
    1. Si, claramente no entendes NADA de como funciona Blogger. Cómo donde esta la pestaña "PLANTILLA" es más que básico eso... Está en el panel del blog, hay una lista de opciones que dice Entradas, Comentarios, etc, Plantilla. Ahí está. Y si no la encuentras, como sabes donde poner los códigos??? Los códigos si sirven si te fijas bien donde ponerlos!!! En buena onda, la próxima pregunta mejor porque así no dan ganas de ayudarte ;)

      Eliminar
  4. Gracias, pero a que te refieres con segunda parte ? La mitad del código?

    ResponderEliminar
    Respuestas
    1. Y, si, obvio xD
      Hay una primera parte que se llama
      ::-webkit-scrollbar{
      Y una segunda que se llama
      ::-webkit-scrollbar-thumb{

      Entiendes? :)

      Eliminar
  5. Hola Cataa ^^
    tengo una duda, y es que antes tenía los códigos para poder poner una imagen en vez de un color simple, pero los perdí ><
    sabrías como reemplazar un color simple por la url de una imagen? no se si me explico ·3·
    bueno pues eso, un beso♥

    ResponderEliminar
    Respuestas
    1. Claro, reemplaza lo de

      background-color: #000; por

      background-image: url(URL DE TU IMAGEN);

      y listooo :)

      Eliminar
  6. La verdad me encantó! Antes lo tenia en un diseño, ahora lo quise poner devuelta pero no aparece :/

    ResponderEliminar
  7. Cata, gracias en serio, me sirvió, pero pasa que me sale el código arriba y sigue la barrita normal. Aunque da igual, de todos modos no lo necesito ;3 Gracias igual, besos!
    Pásate por mi blog n.n
    http//yoselilla-panfu.blogspot.com

    ResponderEliminar