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!
¡No olviden comentar y agradecer!
Graciass :D
ResponderEliminarDe nada!
EliminarMe encanto! Gracias :D
ResponderEliminarasjdlfasd, acabo de ver esto y me encanta.
ResponderEliminarMuchas gracias<33
Graciasss Me encanto! :D
ResponderEliminarPerdoname 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!
ResponderEliminarSi, 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 ;)
EliminarGracias, pero a que te refieres con segunda parte ? La mitad del código?
ResponderEliminarY, si, obvio xD
EliminarHay una primera parte que se llama
::-webkit-scrollbar{
Y una segunda que se llama
::-webkit-scrollbar-thumb{
Entiendes? :)
Hola Cataa ^^
ResponderEliminartengo 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♥
Claro, reemplaza lo de
Eliminarbackground-color: #000; por
background-image: url(URL DE TU IMAGEN);
y listooo :)
La verdad me encantó! Antes lo tenia en un diseño, ahora lo quise poner devuelta pero no aparece :/
ResponderEliminarEh? No entendí, qué no aparece?
EliminarCata, 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!
ResponderEliminarPásate por mi blog n.n
http//yoselilla-panfu.blogspot.com
Genial me funciono muy bien gracias :D
ResponderEliminar