7.29.2013

Modificar barra de desplazamiento

Bienvenidos otro lunes más a la ZONA GEEK. Hoy empezamos una mini-sección en la que os mostraré diferentes tutoriales para personalizar vuestros blogs.
Hoy cambiaremos la barra de desplazamiento (es aquella que aparece en la parte derecha de la pantalla de tu web o blog y permite que tus usuarios se desplacen hacia abajo o hacia arriba en nuestra página) de nuestro navegador por una más elegante y totalmente personalizable, es muy fácil de implantar en tu plantilla.

Con esta barra insertada, podremos darle un toque de distinción y elegancia a nuestro blog, me llamó la atención, sobre todo, por su facilidad de aplicación pero también  por su diseño (me lo esperaba mucho peor) ya que es sencilla y menos aparatosa que la barra por defecto. Los usuarios podrán desplazarse con más suavidad, y mejorarás enormemente la imagen de tu blog.

La única pega que tiene este efecto, es que no es compatible con todos los navegadores únicamente se podrá visualizar en Google Chrome, y en Safari.

Aquí podéis ver un ejemplo de como quedaría la barra en un blog de pruebas:




Vayamos al grano. Lo único que tendréis que hacer para colocar e insertar este efecto en Blogger será lo siguiente:


  1. Entrar en Blogger 
  2. Hacer click en "Plantilla" (a la izquierda) y luego en "Editar Html"
  3. Lo siguiente será buscar presionando (Ctrl+F) la etiqueta ]]> (puedes copiar y pegar)
  4. Pulsar enter y justo antes de ]]></b:skin> pegar el siguiente código:
/* --- Barra de desplazamiento --- */
::-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 {
}

Por último deberás cambiar el color hexadecimal (marcado en azul) por el  que más se adecue al estilo o diseño de tu blog. Aquí tenéis una pagina donde se muestran los códigos de colores, también es posible personalizar otros aspectos como la anchura del blog, solo es cuestión de ir modificando valores para ponerlo a vuestro gusto. Espero que os haya gustado y que comentéis si tenéis alguna duda.
¡Un saludo!


Twitter Instagram

10 comentarios

  1. Yo suelo navegar el 99.99% de las veces con Firefox asi que esto no lo intento no vaya a tocar algo que no sea y luego no lo sepa arreglar. De todas formas muchas gracias por los turoriales. Si pudieras hacer uno para cambiar el tipo de letra en el cuerpo de la entrada te lo agradeceria muchisimo.

    Saludos desde Nadie esta solo =)

    ResponderEliminar
  2. ¡Hola! Pues ya lo he hecho y queda mucho mejor que la barrita de siempre :) Ha sido muy fácil!
    Gracias por el tutorial. Besos ^^

    ResponderEliminar
  3. Holaaaaa, cuando valla a cambiar todo el blog , me pasare otra vez , que me ha gustado
    UN beso

    ResponderEliminar
  4. Qué interesante...pues yo por ahora estoy feliz con mi barrita, pero cuando quiera cambiar un poco el blog pasaré por aquí, que me ha encantado.
    Seguir haciendo entradas de estas, es muy chulo aprender nuevas cosas.

    Besos.

    ResponderEliminar
  5. Hola!
    Tendré en cyyenta este post para cuando vuelva a cambiar el diseño del blog.

    Saludos!

    ResponderEliminar
  6. ¡Hoooooola!

    De momento, no tengo pensado hacer ningún cambio en el blog. Pero cuando lo haga, me volveré a pasar por esta entrada porque me interesa este asunto. ¡Gracias por la explicación! :)

    Cyrelle

    ResponderEliminar
  7. Jope, me encanta esta sección, la entrada está genial ^^ muchas gracias yo ya lo he hecho en mi blog y también lo pienso poner para Tumblr ^^

    ResponderEliminar
  8. Gracias una sección muy interesante

    ResponderEliminar
  9. Muchas gracias por el tutorial! A finales de verano tengo pensado cambiar el aspecto del blog completamente así que pasaré por aquí porque me ha gustado mucho. A ver qué más cositas nos enseñáis ;)

    Besos!

    ResponderEliminar

El Inventario. All rights reserved.
Blog design by labinastudio.