¿Quieres mejorar la barra de desplazamiento de tu blog?
La barra de desplazamiento es aquella que aparece en la parte derecha de la pantalla y permite a los usuarios desplazarse hacia abajo o hacia arriba en el blog.
Para darles una experiencia de uso fácil a los visitantes es esencial disponer de un desplazamiento suave; un desplazamiento personalizado como el que veremos hoy, hace el trabajo muy facil, agradable y sencillo.
¿Porque usar una barra de desplazamiento personalizada?
Una buena barra de desplazamiento añade una vida nueva y elegante a su sitio web. Imagina que una persona tiene un sitio web muy profesional, pero la barra de desplazamiento es de la vieja escuela, es bastante claro que, destruirá el panorama completo de un sitio web.
A continuación observa la diferencia entre una barra antigua y una personalizada:
La anterior imagen es solo un ejemplo, porque la que haremos sera un poco diferente a esa.
Personalizando la Scroll bar
Lo que haremos para mejorar nuestra barra de desplazamiento sera muy sencillo.
Solo utilizaremos un CSS en nuestra plantilla y el trabajao estara terminado.
Entonces estando en blogger ve a Plantilla - Editar HTML, das un clic dentro de la plantilla, presionas Ctrl + F, escribes ]]>
/* --- Barra de desplazamiento: terrenoblogger.co --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #62ABD2 10%,#62ABD2 51%);
}
::-webkit-scrollbar-track {
}
Muy bien, con esto ya tendrás una barra de desplazamiento personalizada para blog.
Cualquier inquietud puedes comentarla
.png)
Lo he implementado y queda estupendo
ResponderEliminarMuchas gracias
Hola!!
EliminarAcabo de verlo en tu blog y esta de maravilla.
Un saludos!!
Muy buen truco, te felicito, muchas gracias por compartirlo.
ResponderEliminarHola Ivan!!
EliminarEspero que te sea de gran utilidad esta barra personalizada.
La verdad es que me has ayudado muchísimo, lo andaba buscando, sigue así, un diez.
EliminarGracias Ivan.
EliminarDiego, con este truco no he podido, recuerda que Blogger cambio la plantilla de HTML, ahora sale en colores, no se si tenga algo que ver puesto que le doy buscar ]]>.y no me aparece, inclusive dándole clic a Plantilla de Formato donde salen más artilugios y tampoco aparece.
ResponderEliminarEspero por favor me orientes con este truco.
Olvidaba actualizar este post.
EliminarEn realidad no se debe presionar F3. Debes entrar en el Editor HTML, dar un clic dentro del editor y presionar Ctrl + F, entonces alli escribe: ]]></b:skin> y presiona Enter, y justo antes pegaras el código que te deje arriba.
Diego, si entras a mi blog, emprendernegociosmultinivel.blogspot.com, te darás cuenta que el desplazamiento no es igual al tuyo, por favor me orientas que debo hacer para que el desplazamiento quede como debe ser.
ResponderEliminarIvan, el desplazamiento es el correcto. Recuerda que el desplazamiento que instalastes es el que esta en este blog de pruebas: http://pruebatb.blogspot.com/2013/04/post-prueba-4.html
EliminarDiego, que pena mi ignorancia, pero no entendí este último comentario, no se que me falta, espero me pueda ayudar, gracias por todas tus respuestas.
ResponderEliminarIvan, lo que quiero decir es que tu has instalado correctamente la barra de desplazamiento.
EliminarSaludos!
Hola, apliqué la barra en mi blog pero ahora dejó de funcionarme un efecto deslizante que tenía en los enlaces de mis redes sociales del lado izquierdo superior: http://ergofelixculpa.blogspot.mx/ Cómo puedo hacerle para mantener el efecto de desliz.
ResponderEliminarYa llevo varios consejos de tu blog aplicados al mio.
me parece que el error está en esta parte del código que da la orden para deslizar (te direcciono a la página de donde lo obtuve: http://www.amorsevillista.com/2013/05/redes-sociales-con-efecto-deslizante.html)
ResponderEliminarTambién agregué el Pop Up de facebook que recomiendas (me funcionó perfecto), no sé si entre en conflicto con el deslizante de las redes.
Ya pude resolver el problema, se relacionaba con una librería duplicada que entraba en conflicto con el Pop Up de facebook y la barra de redes sociales. Ahora todo funciona perfecto; aquí mi blog: http://ergofelixculpa.blogspot.mx/
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¡Estupendo! Me funciona de maravilla con Google Chrome, con Opera y con Safari, pero no con Internet Explorer ni con Firefox. ¿Cómo lo hago para esos navegadores? Tengo entendido que con javascript sería compatible con la mayoría de navegadores, pero ¿como se hace de manera muy sencilla?
ResponderEliminarNo me funciono, no se que he hecho mal.. hice exactamente lo que dijiste. Mi blog es http://fuelfinalesunuevocomienzo.blogspot.com. Me puedes ayudar o es muy dificil? Lamento mi ignorancia.
ResponderEliminar¿Hay alguna forma en el código de alargar la barra de desplazamiento?
ResponderEliminarSaludos!
hola, ya use este codigo pero quería saber, ¿como puedo quitar la barra de desplazamiento horizontal?
ResponderEliminar